Render array item after a interval

JavaScript
1 
import React, { Component } from "react"

export default class Main extends Component {
  constructor(props) {
    super(props)
    this.state = {
      role: ["a","b","c"],
      display: "",
    }
  }
  componentDidMount() {
      for (let i of this.state.role) {
        setTimeout(() => {
          this.setState(() => { display: i})
        }, 2000)
      }
    })
  }

  render() {
    return (
      <>
          <h3>{this.state.display}</h3>
      </>
    )
  }
}

It is only printing the last element in the array

2

Your setTimeout timers are all being defined at the same time in your loop, so they’re all going off at the same time. If you want them to run consecutively, you need to trigger the next setTimeout inside the last one, which means you’ll have to find some other way to do it other than just a loop.

Edit: actually, you can still do it in a loop – just make the timer increase in value, so that the first fires after 2000, the next after 4000, and so on.