Why am I getting undefined error for map method while getting array as a prop?

Question

This is what I'm passing as a prop

<Card  tags={ ["HTML", "CSS", "JavaScript", "React"] } />

Here I'm getting the prop

const Card = (props) => {
const { tags } = props; return (
<Cardstyled> <Tags>
{tags.map((tag) => ( <Tag>{tag}</Tag> ))}
</Tags>
</Cardstyled>
)

Everything seems fine but I'm still getting the undefined error

TypeError: Cannot read properties of undefined (reading 'map')

Could anyone help me with this? Thanks!

Answer 1

Its not define at the rendering time, do:

{tags && tags.map((tag) => ( <Tag>{tag}</Tag> ))}