I have an array of comments I want to print out. But every time I keep getting this warning: "Encountered two children with the same key, '1'." even when there are only one comment in array.
How can I fix that?
let content = props.comments.map((comment) =>
<Card key={props.product.id} className="shadow" body>
<p">{comment}</p>
</Card>
)
Remember that map method takes (currentValue, index, arr). If props.product.id not working then use current index of item instead of a props.product.id
let content = props.comments.map((comment, index) =>
<Card key={index} className="shadow" body>
<p">{comment}</p>
</Card>
)
Another thing you could do is:
let content = props.comments.map((comment, i) =>
<Card key={i} className="shadow" body>
<p">{comment}</p>
</Card>
)