I have some code which displays some data on a table be adding a new <tr><td>...
It currently display's only 1 item which is name ....
See below:
<tbody>
{
props.names.map( ({name}, i) => <tr key={i}><td>{ name }</td></tr> )
}
</tbody>
If I have more items to display... for example:
id, name, lastname etc
For example:
<td>{ id }</td>
<td>{ name }</td>
<td>{ lastname }</td>
How do I modify the code above so I can do that?
I think you could try:
props.names.map( ({id, name, lastname}, i) => (
<tr key={i}>
<td>{ id }</td>
<td>{ name }</td>
<td>{ lastname }</td>
</tr>
))
)
Plus this looks like react Js and not javascript, you should change your tags to get more pertinent response/help !
if names is an array with many name objects. As an example, If a single name object looks like this? {"id":1, "name": "Tim Ering", "lastname": "Ering"}
Try this?
props.names.map( (nameObj, i) => (
<tr key={i}>
<td>{ nameObj.id }</td>
<td>{ nameObj.name }</td>
<td>{ nameObj.lastname }</td>
</tr>
))
But I don't know why just props. I thought that would be this.props.names
[<>]the snippet editor and create a minimal reproducible exampleprops.namesis an array of objects with properties called id, name etc then yes, it's easily possible by modifying the code you have. (PS since you appear to be using React it might be a good idea to use the "react" tag)