How to use setTimeout within a .map() in reactJS

Question

I have an array of players which I map through. The user is constantly adding new players to this array. I map through the array and return a set of elements. I'd like each player from the list to render one at a time with a 500ms interval in between. Here's the code I have so far:

export const ShowDraftedPlayers = props => {
  const {
    draftedPlayers,
    getPlayerProfile,
    teams,
    draftPos,
    myTeam } = props;
  let playersDraftedList = draftedPlayers.map((player, index) => {
    return (
      <div key={index} className='drafted'>
        <p style={style}>TEAM {player.teamDraftedBy} </p>
          <b className='player-lastName'> {player.displayName} </b>
           {player.position}
        </p>
      </div>
    )
  })
  return (
    <div className='draftedPlayers-container'>
      {playersDraftedList}
    </div>
  )
}

Basically, what would you do is keep a state of the shown drafted players, and create an interval that adds to the state array item from the props each time. — Gershon Papi
– Gershon Papi, Commented Jun 10, 2020 at 16:00
You have 2 issues here, 1: setTimeout inside a map isn't really ideal, hacks like increasing the timeout values for each item is just that, a hack. 2: React doesn't work that way, you can't pausing rendering in React, like everything else that updates in React, you need to use state. — Keith
– Keith, Commented Jun 10, 2020 at 16:01

Jacob · Accepted Answer · 2020-06-10 16:37:34Z

6

You can use an effect to create an interval which updates a counter every 500ms; your render logic can then render a growing slice of the array each time.

export const ShowDraftedPlayers = props => {
  const {
    draftedPlayers,
    getPlayerProfile,
    teams,
    draftPos,
    myTeam
  } = props;

  const [count, setCount] = useState(0);

  useEffect(() => {
    let counter = count;
    const interval = setInterval(() => {
      if (counter >= draftedPlayers.length) {
        clearInterval(interval);
      } else {
        setCount(count => count + 1);
        counter++; // local variable that this closure will see
      }
    }, 500);
    return () => clearInterval(interval); 
  }, [draftedPlayers]);

  let playersDraftedList = draftedPlayers.slice(0, count).map((player, index) => {
    return (
      <div key={index} className='drafted'>
        <p style={style}>TEAM {player.teamDraftedBy} </p>
          <b className='player-lastName'> {player.displayName} </b>
           {player.position}
        </p>
      </div>
    )
  })
  return (
    <div className='draftedPlayers-container'>
      {playersDraftedList}
    </div>
  )
}

answered Jun 10, 2020 at 16:37

Jacob

79k24 gold badges159 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dev.doc Over a year ago

Hi, very helpful your function!! I have adapted to my project and I wonder if it has a way to customize the interval time instead of fixed. I have a list of array and not all items can have the same fixed amount of interval time. Thank you

Jacob Over a year ago

@dev.doc should be possible if you call setTimeout on with a dynamic value (derived from the counter?) instead of setInterval. If you get stuck, best to ask in a separate question.

Pandemonium · Accepted Answer · 2020-06-10 20:19:23Z

1

You don't. setTimeout is asynchronous, as so is JavaScript and React. Components are rendered as soon as possible so that JavaScript can jump to do something else. The best way is to create a hook that reacts (pun intended) to some change in value, in this case props.draftedPlayers, setTimeout for 500ms, then add that new player to an internal players state and let the component renders based on it.

Here is how the component will reflect a change in props.draftedPlayers with a delay of 500ms:

export const ShowDraftedPlayers = props => {
  const {
    draftedPlayers,
    getPlayerProfile,
    teams,
    draftPos,
    myTeam 
  } = props;

  const [players, setPlayers] = useState([]);

  // Set internal `players` state to the updated `draftedPlayers`
  // only when `draftedPlayers` changes.
  useEffect(() => {
    const delay = setTimeout(() => {
      setPlayers(draftedPlayers);
    }, 500);
    return () => clearTimeout(delay);
  }, [draftedPlayers]);

  let playersDraftedList = players.map((player, index) => {
    return (
      <div key={index} className='drafted'>
        <p style={style}>TEAM {player.teamDraftedBy} </p>
          <b className='player-lastName'> {player.displayName} </b>
           {player.position}
        </p>
      </div>
    );
  };
};

Whenever draftedPlayers prop is changed (players added or removed) from the outer context, the component will update its players array after a delay of 500ms.

edited Jun 10, 2020 at 20:19

answered Jun 10, 2020 at 16:31

Pandemonium

8,4784 gold badges37 silver badges56 bronze badges

1 Comment

w35l3y Over a year ago

Consider adding clearTimeout so that you will only have one setTimeout running at once.

Collectives™ on Stack Overflow

How to use setTimeout within a .map() in reactJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related