ReactJS: setTimeout not working inside map to render component

Question

I want to render my ChatBubble component after an amount of time. But it does not return my component. Instead it returns numbers 2 and 3 as a string.

const Conversation = ({data}) => {
  const { messages } = data;

  return (
    <div>
      {
        messages.map(data => {
          return setTimeout(() => {
            return <ChatBubble key={uniqid()} data={data}/>
          }, data.delay);
        })
      }
    </div>
  );
}

export default Conversation;

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jared Smith, Jun 07 '18 at 17:10
@jared yes definetly worth reading for the OP, but that wont help him at this particular problem. — Jonas Wilms, Jun 07 '18 at 17:15

score 6 · Answer 1 · edited Jun 08 '18 at 14:26

Cause setTimeout returns the id of the timer. You cannot just return something to react and expect some magic to happen. Instead you probably need a stateful conponent like this:

class Conversation extends React.Component {
  constructor(props) {
    super(props);
    this.state = { messages: [] };
  }

  render() {
    return this.state.messages.map(data => (<ChatBubble {...data} />));
  }

  componentDidMount() {
     const {messages, delay} = this.props.data;
     this.interval = setInterval(() => {
       this.setState(prev => ({ messages: prev.messages.concat(messages.shift()) }));
       if(!messages.length) clearInterval(this.interval);
     }, delay);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }
}

ReactJS: setTimeout not working inside map to render component

1 Answers1