[Solved]-How can I render through similar components on a timer?-Reactjs

You can store the index in a state, and use setTimeout to update that state every 10 seconds.

You only want to call this.instantiatePanels() once, so do that before the render and save the results, then in the render index that saved array using the index from the state.

Also, if the Panel-instantiation is as simple as in your snippet, I would avoid the instantiation entirely, and instead have a render function like:

render() {  
  return (
    <div className="App">
      <Panel data={this.state.data} currentPanel={panelIndexState} key={this.state.data.Key} />
    </div>
  );
}

And in the component, before the render, define something like:

const iteratePanelIndex = () => {
    this.setState((state) => {
        ...state,
        panelIndexState: (state.panelIndexState +1) % 7
    })
    setTimeout(iteratePanelIndex, 10000);
};

(depending on how you're handling state)

Then call iteratePanelIndex() in componentDidMount to kick things off