React.js creating several components with arrays

Question

I’m trying to create several components <Pit /> however, one per result coming from the API, without excluding the previously created.

The API returns an object with 2 arrays inside, the solution was to put each array into a state variable and pass as props directly to the Pit component.

However, this way I can create only 1 Pit component and each API return overwrites the previous one...

My code is like this:

myCallback = (dataFromChild) => {
    this.setState({cod_ativo_search: dataFromChild});
    this.callApi(dataFromChild);
}

async callApi(dataFromChild) {
    const response = await api.get(`/ativo/ativo?cod_ativo='${dataFromChild}'`);

    if(response.data[0].valueOf().rows.length != 0 || response.data[1].valueOf().rows.length != 0){

      this.setState({ responseCompra: response.data[0].rows })
      this.setState({ responseVenda: response.data[1].rows })
      this.setState({ codAtivo: dataFromChild })

   }
}

 render() {
    return (
    <div> 
        <SearchBar callbackFromParent={this.myCallback}/>
        <Pit responseCompra={this.state.responseCompra} responseVenda={this.state.responseVenda} codAtivo={this.state.codAtivo} />
      </div>
    );
 }

Any idea how I can create an array and insert each new result coming from the API to create several Pit components?

Answer 1

Place an array of data in the state:

const dado = {compra: response.data[0].rows, venda: response.data[1]....}; 
const { dados } = this.state; 
dados.push(dado); 
this.setState(state => ({state, dados: dados}));. 

And in render use a loop to create the Pit:

const { dados } = this.state; 
const pits = dados.map(d => <Pit responseCompra={d.compra}... />); 
return (<div>{pits}</div>);

See working here

Answer 2

It worked, I just needed a few tweaks:

const dado = {
      compra: this.state.responseCompra,
      venda: this.state.responseVenda
};

this.state.dados.push(dado);

in yielding

const pits = this.state.dados.map((d, i) => {
            return (
                <Pit
                    key={i} 
                    compra={d.compra} 
                    venda={d.venda}  />
            );
        })

return(
   <SearchBar callbackFromParent={this.myCallback}/>
   <div>{pits}</div>
)