Table react bootstrap component rendering from array

Question

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>

Kavishka · Accepted Answer · 2022-01-15 11:32:45Z

3

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>

answered Jan 15, 2022 at 11:32

Kavishka

2513 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Table react bootstrap component rendering from array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related