how can i generate my task randomly using map without disturbing the current logic?

Question

I have a dnd game and right now my task are in the order in which the array is defined but I want my task to be generated randomly not in a particular order

I am using my task component in my column component and right now using a simple map function in column component which fetch them from initial data in the sequence they are defined but i want them to be generated randomly how can i do that there that map function anyone who can help

Column Component:

import React from 'react'
import styled from 'styled-components'
import Task from './task'
import { Droppable } from 'react-beautiful-dnd'

export default class Column extends React.Component {
  render() {
    return (
      <Container>
        <Title>{this.props.column.title}</Title>
        <Droppable droppableId={this.props.column.id} type="TASK">
          {(provided, snapshot) => (
            <TaskList
              ref={provided.innerRef}
              {...provided.droppableProps}
              isDraggingOver={snapshot.isDraggingOver}
            >
              {this.props.tasks.map((task, index) => (
                <Task key={task.id} task={task} index={index} />
              ))}
              {provided.placeholder}
            </TaskList>
          )}
        </Droppable>
      </Container>
    )
  }
}

Answer 1

Cosider This:

import React from 'react'
import styled from 'styled-components'
import Task from './task'
import { Droppable } from 'react-beautiful-dnd'

export default class Column extends React.Component {


  render() {
    const shuffledArr = getShuffledArr(this.props.tasks);
    return (
      <Container>
        <Title>{this.props.column.title}</Title>
        <Droppable droppableId={this.props.column.id} type="TASK">
          {(provided, snapshot) => (
            <TaskList
              ref={provided.innerRef}
              {...provided.droppableProps}
              isDraggingOver={snapshot.isDraggingOver}
            >
              {shuffledArr.map((task, index) => (
                <Task key={task.id} task={task} index={index} />
              ))}
              {provided.placeholder}
            </TaskList>
          )}
        </Droppable>
      </Container>
    )
  }
}

const getShuffledArr = arr => {
  if (arr.length === 1) {return arr};
  const rand = Math.floor(Math.random() * arr.length);
  return [arr[rand], ...getShuffledArr(arr.filter((_, i) => i != rand))];
};

Answer 2

You can generate a random number in between 0-arr length-1, and keep decreasing it in each iteration, also move the selected value to the end of array in each iteration, doing so you will not select the same element twice

 let arr = ['a', 'b', 'c', 'd', 'e']; let out = arr.map((_, i, array) => { let index = Math.floor(Math.random() * (arr.length-i)) let ele = array[index]; array.push(arr.splice(index, 1)) return ele; }); console.log(out) 

{this.props.tasks.map((task, index, arr) => (
    let i = Math.floor(Math.random() * (arr.length-index))
    let ele = arr[index];
    arr.push(arr.splice(index, 1))
    <Task key={ele.id} task={ele} index={index} />
))}