Reactjs-map-an-array-with-each-item-delayed

Consider I have an array
const darkHeros = [ {id: 1, name:"Arrow"}, {id:2, name:"Flash"}, {id:3, name:"Batman"} ];

So when I render these elements it should be appearing like “Arrow” first, then after 1 second it should render “Flash” and after consecutive 1 second it should render “Batman”.

The Array.map() loops over items in one go applying your callback to each item which determines what is returned. But this doesn’t allow you any control over how it behaves.

darkHeros.map(
  (i)=>window.setTimeout(()=>console.log(i), 2000)
)

They are all logged 2 seconds later. Instead you can write a recursive function that recursively is called within the timeout, and calls the callback on each item.

function do_timeout( items = [], callback = ()=>{}, delay = 50, index = 0 ){
  if( index < items.length ){
    window.setTimeout(function(){
      callback(items[index]);
      
      do_timeout(items, callback, delay, ++index);
    }, delay);
  }
}