title: React - Dynamically render data into accordion after API call
body: <p>I am developing a management React application.
  In the application, I have a table (MaterialTable) in which I show the detail for each row with the <code>detailPanel</code> option provided.
  Inside the detail panel I have three accordions, the first populated with rowData of the table, while the other two must be populated following an API call.</p>
  <p>But I have the following problem: when I open the detail of a row (example row number 3) and then click on the second or third accordion, data is not retrieved correctly.
  By clicking on another row (example row 5), the data is correctly retreived and shown, but it is not the data relating to row 5, but those relating to row 3.</p>
  <p>I therefore always have one step late in updating the accordion.</p>
  <p>Do you have any suggestions or advice?</p>
  <ul>
  <li>myCode:</li>
  </ul>
  <pre><code>import MaterialTable from &quot;material-table&quot;;
  import React, { useEffect, useState } from &quot;react&quot;;
  import tableIcons from &quot;../templates/TableIcons&quot;;
  import getColumns from &quot;./Tbl_DocumentoColumns&quot;;
  import Edit from &quot;@material-ui/icons/Edit&quot;;
  import {
    Accordion,
    AccordionSummary,
    AccordionDetails,
  } from &quot;@material-ui/core&quot;;
  import { Switch } from &quot;@material-ui/core&quot;;
  import { withRouter } from &quot;react-router&quot;;
  import { AddBox } from &quot;@material-ui/icons&quot;;
  import ArrowDownwardOutlinedIcon from &quot;@material-ui/icons/ArrowDownwardOutlined&quot;;
  import {
    deleteTbl_Documento,
    getTbl_Documento,
  } from &quot;../../repo/tbl_documentoRepo&quot;;
  import { searchRata } from &quot;../../repo/tbl_rataRepo&quot;;
  import { searchDettaglioRata } from &quot;../../repo/tbl_dettagli_rataRepo&quot;;
  import { Loading } from &quot;../templates/Loading&quot;;
  /*
  Documentation on developing the Material-Table can be found at https://material-table.com/
  */
  
  const Tbl_DocumentoTable = (props) =&gt; {
    const history = props.history;
    const [columns, setColumns] = useState(getColumns({}));
    //const [rata, setAccordionRata] = useState({idDoc: &quot;&quot;});
    //const [drata, setAccordionDetailRata] = useState({idDoc: &quot;&quot;});
    const [loading, setLoading] = useState(false);
    const [rata, setIdDocR] = useState({ iddoc: &quot;&quot; });
    const [drata, setIdDocDR] = useState({ iddoc: &quot;&quot; });
    const [acc_rata, setAccordionR] = useState([]);
    const [acc_drata, setAccordionDR] = useState([]);
    //Here we call delete
    const handleRowDelete = (oldData, resolve) =&gt; {
      setLoading(true);
      deleteTbl_Documento(oldData.idDoc)
        .then((res) =&gt; {
          resolve();
          setLoading(false);
        })
        .catch((error) =&gt; {
          resolve();
          setLoading(false);
        });
    };
    //Settiamo l'idDoc di riferimento per la rata
    const handleRata = (evt) =&gt; {
      setIdDocR({ iddoc: evt });
    };
    //Settiamo l'idDoc di riferimento per il dettaglio rata
    const handleDettagliRata = (evt) =&gt; {
      setIdDocDR({ iddoc: evt });
    };
  
    useEffect(() =&gt; {
      const R = async () =&gt; {
        const r = await searchRata(rata.iddoc);
        setAccordionR(r.data.data.data);
      };
      R();
      console.log(acc_rata);
    }, [rata.iddoc]);
  
    useEffect(() =&gt; {
      const DR = async () =&gt; {
        const r = await searchDettaglioRata(drata.iddoc);
        setAccordionDR(r.data.data.data);
      };
      DR();
      console.log(acc_drata);
    }, [drata.iddoc]);
  
    return (
      &lt;div&gt;
        &lt;MaterialTable
          style={{
            marginLeft: 30,
            responsive: true,
            marginTop: 50,
            marginRight: 30,
          }}
          minRows={15}
          title=&quot;Lista dei documenti&quot;
          columns={columns}
          data={async (query) =&gt; {
            setLoading(true);
            const res = await getTbl_Documento(
              query.page,
              query.pageSize,
              query.search
            );
            setLoading(false);
            return {
              data: res.data,
              page: query.page,
              totalCount: parseInt(res.total),
            };
          }}
          detailPanel={[
            {
              tooltip: &quot;Dettaglio&quot;,
              icon: &quot;+&quot;,
              openIcon: &quot;-&quot;,
              render: (rowData) =&gt; {
                return (
                  &lt;div&gt;
                    &lt;Accordion&gt;
                      &lt;AccordionSummary
                        expandIcon={&lt;ArrowDownwardOutlinedIcon /&gt;}
                        aria-controls=&quot;panel1a-content&quot;
                        id=&quot;panel1a-header&quot;
                      &gt;
                        Dettaglio del documento
                      &lt;/AccordionSummary&gt;
                      &lt;AccordionDetails&gt;
                        &lt;div
                          style={{
                            columns: 3,
                            width: &quot;100%&quot;,
                            responsive: true,
                          }}
                        &gt;
                          &lt;ul style={{ fontSize: &quot;14px&quot; }}&gt;
                            &lt;li&gt;Catena Servizio: {rowData.idCatenaServizio}&lt;/li&gt;
                            &lt;li&gt;Commessa: {rowData.idCommessa}&lt;/li&gt;
                            &lt;li&gt;Spedizione Racc: {rowData.spedRacc}&lt;/li&gt;
                            &lt;li&gt;Ricezione Sped: {rowData.spedRic}&lt;/li&gt;
                            &lt;li&gt;Nome Documento: {rowData.DocNomeFile}&lt;/li&gt;
                            &lt;li&gt;
                              Nome Documento Cliente: {rowData.DocNomeFileCliente}
                            &lt;/li&gt;
                            &lt;li&gt;
                              ID Cliente sul documento: {rowData.docIDCliente}
                            &lt;/li&gt;
                            &lt;li&gt;#Documento: {rowData.docNum}&lt;/li&gt;
                            &lt;li&gt;Data documento: {rowData.docData}&lt;/li&gt;
                            &lt;li&gt;Destinatario 2: {rowData.docDestinatario2}&lt;/li&gt;
                            &lt;li&gt;Destinatario 3: {rowData.docDestinatario3}&lt;/li&gt;
                            &lt;li&gt;Destinatario 4: {rowData.docDestinatario4}&lt;/li&gt;
                            &lt;li&gt;Destinatario 5: {rowData.docDestinatario5}&lt;/li&gt;
                            &lt;li&gt;Destinatario 6: {rowData.docDestinatario6}&lt;/li&gt;
                            &lt;li&gt;Codice Avvio: {rowData.codiceAvvio}&lt;/li&gt;
                            &lt;li&gt;Dati 1: {rowData.dati1}&lt;/li&gt;
                            &lt;li&gt;Dati 2: {rowData.dati2}&lt;/li&gt;
                            &lt;li&gt;Dati 3: {rowData.dati3}&lt;/li&gt;
                            &lt;li&gt;Dati 4: {rowData.dati4}&lt;/li&gt;
                            &lt;li&gt;Dati 5: {rowData.dati5}&lt;/li&gt;
                            &lt;li&gt;Spedito: {rowData.spedito}&lt;/li&gt;
                            &lt;li&gt;Nome Immagine: {rowData.nomeImmagine}&lt;/li&gt;
                            &lt;li&gt;
                              Pagamento abilitato: {rowData.pagamentoAbilitato}
                            &lt;/li&gt;
                            &lt;li&gt;UltimaModifica: {rowData.lastUpdate}&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
                      &lt;/AccordionDetails&gt;
                    &lt;/Accordion&gt;
                    &lt;Accordion&gt;
                      &lt;AccordionSummary
                        expandIcon={&lt;ArrowDownwardOutlinedIcon /&gt;}
                        aria-controls=&quot;panel1a-content&quot;
                        id=&quot;panel1a-header&quot;
                        onClickCapture={() =&gt; handleRata(rowData.idDoc)}
                      &gt;
                        Rate associate
                      &lt;/AccordionSummary&gt;
                      &lt;AccordionDetails data={acc_rata}&gt;
                        &lt;div
                          style={{
                            columns: 3,
                            width: &quot;100%&quot;,
                          }}
                        &gt;
                          &lt;ul style={{ fontSize: &quot;14px&quot; }}&gt;
                            {acc_rata.map((y) =&gt; {
                              console.log(y.idBol);
                              return &lt;li key={y.idBol}&gt;{y.idBol}&lt;/li&gt;;
                            })}
                          &lt;/ul&gt;
                        &lt;/div&gt;
                      &lt;/AccordionDetails&gt;
                    &lt;/Accordion&gt;
                    &lt;Accordion&gt;
                      &lt;AccordionSummary
                        expandIcon={&lt;ArrowDownwardOutlinedIcon /&gt;}
                        aria-controls=&quot;panel1a-content&quot;
                        id=&quot;panel1a-header&quot;
                        onClickCapture={() =&gt; handleDettagliRata(rowData.idDoc)}
                      &gt;
                        Dettaglio delle rate
                      &lt;/AccordionSummary&gt;
                      &lt;AccordionDetails data={acc_drata}&gt;
                        &lt;div
                          style={{
                            columns: 3,
                            width: &quot;100%&quot;,
                          }}
                        &gt;
                          &lt;ul style={{ fontSize: &quot;14px&quot; }}&gt;
                            {acc_drata.map((adr) =&gt; {
                              return &lt;li key={adr.idBol}&gt;idBol: {adr.idBol}&lt;/li&gt;;
                            })}
                          &lt;/ul&gt;
                        &lt;/div&gt;
                      &lt;/AccordionDetails&gt;
                    &lt;/Accordion&gt;
                  &lt;/div&gt;
                );
              },
            },
          ]}
          options={{
            sorting: true,
            actionsColumnIndex: -1,
            pageSize: 20,
            toolbar: true,
            paging: true,
            responsive: true,
            exportButton: true,
            exportAllData: true,
            exportFileName: &quot;ListaTributi&quot;,
          }}
          onRowClick={(event, rowData, togglePanel) =&gt; togglePanel()}
          actions={[
            {
              icon: () =&gt; &lt;Edit /&gt;,
              tooltip: &quot;Edit&quot;,
              onClick: (event, rowData) =&gt; {
                history.push({
                  pathname: `/tbl_documento/update/${rowData.idDoc}`,
                  user: rowData,
                });
              },
            },
            {
              icon: () =&gt; &lt;AddBox variant=&quot;contained&quot; color=&quot;secondary&quot; /&gt;,
              tooltip: &quot;Add New&quot;,
              // This makes add button to appear in table toolbar instead for each row
              isFreeAction: true,
              onClick: (event, rowData) =&gt; {
                history.push(&quot;/tbl_documento/add&quot;);
              },
            },
          ]}
          icons={tableIcons}
          editable={{
            onRowDelete: (oldData) =&gt;
              new Promise((resolve) =&gt; {
                handleRowDelete(oldData, resolve);
              }),
          }}
        /&gt;
      &lt;/div&gt;
    );
  };
  export default withRouter(Tbl_DocumentoTable);
  </code></pre>