CODEWITHSUNDEEP
javascriptreactjs
user10518096
user10518096

Reputation:

React display props on table from props.object

I have a component in react where I pass so data in a prop:

<Mycomponent names={[{name: 'peter'},{name: 'pan'}]} />

Then I have a component which has a table and where I want to display the data in a

Here is the component

import React from 'react';

const Mycomponent = (props) => <div>

    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{ props.names }</td>
            </tr>
        </tbody>
    </table>
</div>;

export default Mycomponent;

How do I loop and display each name in a <tr><td>{props.names.name}</td></tr> ?

Upvotes: 0

Views: 226

Answers (1)

SpeedOfRound
SpeedOfRound

Reputation: 1278

<tbody>
  {
     props.names.map( ({name}, i) => <tr key={i}><td>{ name }</td></tr> )
  }
</tbody>

will iterate over all of props.names and return a tr for each

Upvotes: 3

Related Questions