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?

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

  1. Skip the curly brackets to make your code look like so:

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

    Thereby making the map function return your <CheckoutProduct> elements. Otherwise map just runs without returning anything and thus nothing gets rendered.

    Reply

Leave a Comment