javascriptjsxreact-bootstrapreact-bootstrap-table

Table react bootstrap component rendering from array


I want to render a Table component with N rows, where N corresponds to a given array lenght, and for each row there will be two columns: the 1st one with a parameter of the array of objects and the 2nd with the other parameter. How can i do that?
Here's a backbone

<Table>
            <thead>
                <tr>
                    <th>param #1</th>
                    <th>param #2</th>
                </tr>
            </thead>
            <tbody>
                ...for array.length-times...(
                <td>array[0].param1</td>
                <td>array[0].param2</td>
                ....)
            </tbody>
        </Table>

Solution

  • As I understand your question, you can use a map() method to do that. Here is the sample code.

    <Table>
      <thead>
        <tr>
          <th>param #1</th>
          <th>param #2</th>
        </tr>
      </thead>
      <tbody>
        {yourArray.map(arrayData=>{
        return(
        <tr>
          <td>arrayData.param1</td>
          <td>arrayData.param2</td>
        </tr>
        )
        }
        )}
      </tbody>
    </Table>