looping tables

loopingtables.js

    <Fragment>    
        {data.tables.map((table, i) => {
          return <section key={i} className="ourTable">
            <table>
                <caption>{table.title}</caption>
              <tbody>
                {table.rows.map((row, i) => {        
                  return <tr className={`col-${i + 1}`} key={i}>
                    {row.cols.map((col, i) => {
                      return <td className={`col-${i + 1}`} key={i}>{col.value}</td>
                    })}
                  </tr>
                })}
              </tbody>
            </table>
          </section>
        })}  
    </Fragment>