Issue
I want to loop over this array of objects to render them in a component in react, why the mapping is not working?
fruits:[{"value":"Apple","status":"Green"},{"value":"Orange ","status":"Yellow"},{"value":"Banana","status":"Green"}]
export interface FruitsStatus {
fruits: Record<string, string>;
}
const Fruits: (props: FruitsStatus) => JSX.Element = props => {
return (
{props.fruits.map((fruit, index) => {
return (
<tr key={index}>
<td>
{fruit.value}
</td>
<td > {fruit.status} </td>
</tr>
);
})}
)
}
Solution
I think this is because there is no root tag to contain all tr tags
simply wrap it with fragment :
return (
<>
{props.fruits.map((fruit, index) => {
return (
<tr key={index}>
<td>
{fruit.value}
</td>
<td > {fruit.status} </td>
</tr>
);
})}
</>
)
Answered By - Ali Sattarzadeh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.