React : Mapping over an array inside of a mapped array

Question

I have an array of products, some products may have an array of product colors, but it's not guaranteed. I am trying to map over every color of each product (if available) to give it it's own div. The piece of code I wrote works except for the product.product_colors.map() part. Any contribution or linking to resources would help. Thanks

Fetched data from api looks like this:

{
    "status": 200,
    "count": 2,
    "data": [
        {
        "product_id": 1,
        "product_name": "PRODUCT NUMBER 1",
        "product_price": "14.95",
            "product_colors": [
            {
            "color_id": 1,
            "color_name": "Velvet",
            "color_description": "A reddish-purple color"
            },
            {
                "color_id": 2,
                "color_name": "Navy",
                "color_description": "A darkish blue color somewhat similar to the deep ocean color."
            }
            ]
        },
        {
        "product_id": 2,
        "product_name": "PRODUCT NUMBER 2",
        "product_price": "8.99"
        }
    ]
}

My current code looks like this:

    return(
        <div>
            {data.map((product, index) => (
                <div key={index}>
                    <h2>{product.product_id} ---- {product.product_name}</h2>
                    <h2>{product.product_price}</h2>

                    {product.product_colors
                    ?<div><p>No colors available</p></div>
                    : product.product_colors.map((color) => (
                        <div>
                            <p>{color.color_name}</p>
                            <p>{color.color_description}</p>
                        </div>
                    ))
                    }

                    <br />
                </div>
            ))}
        </div>
    );

Looks like comparison issue. "product.product_colors" is TRUE as long as it's not undefined or null. Simple solution might be adding an "exclamation" to !product.product_colors. — Han
– Han, Commented Mar 2, 2022 at 15:02
@0stone0 Not for every product, but for those who do have colors it does have a product.product_colors array. I have a console.log(data) after it fetches the data from an api. And this is what it gives : ``` {product_id: 1, product_name: 'PRODUCT NUMBER 1', product_price: '12.95', product_colors: Array(6)} ``` — Goldquick
– Goldquick, Commented Mar 2, 2022 at 15:02

Bernardo Ferreira Bastos Braga · Accepted Answer · 2022-03-02 15:01:04Z

1

You've switched the conditions. You want to map over the array when product.product_colors is truthy, which is the first condition.

in other words, you want

product.product_colors ? product.product_colors.map((color) => (
                        <div>
                            <p>{color.color_name}</p>
                            <p>{color.color_description}</p>
                        </div> : <div><p>No colors available</p></div>

answered Mar 2, 2022 at 15:01

Bernardo Ferreira Bastos Braga

1,69316 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Goldquick Over a year ago

Thanks! It does seem to work just fine now, can't believe I got this wrong

Amila Senadheera · Accepted Answer · 2022-03-02 15:01:13Z

1

Error is due to the second item not having a product_colors property. You need to use optional chanining operator (?.) to get rid of error you get.

product.product_colors?.map((color) => (
  <div>
    <p>{color.color_name}</p>
    <p>{color.color_description}</p>
  </div>
))

answered Mar 2, 2022 at 15:01

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

1 Comment

Goldquick Over a year ago

This works perfectly aswell! Can't believe that this had multiple simple solutions that I couldn't figure out. Thanks for the quick answer!

0stone0 · Accepted Answer · 2022-03-02 15:02:30Z

1

You need to ensure product.product_colors exists.

The shortest way to do so is using the optional chaining ?. syntax:

product.product_colors?.map((color, index) =>

Small example:

const data = {"status": 200, "count": 2, "data": [{"product_id": 1, "product_name": "PRODUCT NUMBER 1", "product_price": "14.95", "product_colors": [{"color_id": 1, "color_name": "Velvet", "color_description": "A reddish-purple color"}, {"color_id": 2, "color_name": "Navy", "color_description": "A darkish blue color somewhat similar to the deep ocean color."} ] }, {"product_id": 2, "product_name": "PRODUCT NUMBER 2", "product_price": "8.99"} ] };

const res = data.data.map((product, index) => {
    product.product_colors?.map((color, index) => {
        console.log(color);
    });
});

answered Mar 2, 2022 at 15:02

0stone0

45.5k6 gold badges53 silver badges82 bronze badges

1 Comment

Goldquick Over a year ago

This works exactly how I wanted it. Perfectly explained aswell, thank you!

Collectives™ on Stack Overflow

React : Mapping over an array inside of a mapped array

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related