My Component is not Rendering while passing props through Array

I have an array of objects and objects contain differrent things like id, title, price.
I am using latest way of iterating over array and each time I am rendering my component but
component is not rendering

{
  basket.map(item => {
    <CheckoutProduct
      id={item.id}
      title={item.title}
      image={item.title}
      price={item.price}
      rating={item.rating}
    />
  })
}

here, basket is an array and I have used map function to iterate over basket and CheckoutProduct is
my component.

without calling component inside array, it is rendering but inside array it is not rendering.

When I am doing console log the The baskets title, id, price they are printing on console
like this
{ console.log(items[0]) }
and this
{ console.log(items[0]?.title) }

The only problem is in while I am rendering it using array.
What to do?

82 thoughts on “My Component is not Rendering while passing props through Array”

Leave a Comment