How to display component using forEach in ReactJS Application

Question

How can I display my product.colors ? I need to parse them first that's why I'm trying with forEach somehow:

Here is what I tryed:

    const ParsedColors = props => {
            return(
            props.product.color.forEach(col => {
                const parsed = JSON.parse(col)
                return(
                    <button name="color" value={parsed.value} style={{backgroundColor: `${parsed.value}`}} onClick={() => colorPicker([props.product._id, parsed.value])}/>
                )
            })
            )
        }
...

<div>
    <ParsedColors product={product}/>
<div/>

I know that forEach isn't returning an array but I can't find a way to do it in map. As I said, I need to parse each color

This returns an err:

Error: ParsedColors(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

forEach doesn't return anything. You need to use map if you want to assign the iteration change to a variable — Udendu Abasili
– Udendu Abasili, Commented May 16, 2021 at 17:03

Udendu Abasili · Accepted Answer · 2021-05-16 17:06:27Z

1

forEach returns nothing so you cannot assign a variable to it the way you are doing it. Use map instead

const ParsedColors = props => {
            return(
            props.product.color.map(col => {
                const parsed = JSON.parse(col)
                return(
                    <button name="color" value={parsed.value} style={{backgroundColor: `${parsed.value}`}} onClick={() => colorPicker([props.product._id, parsed.value])}/>
                )
            })
            )
        }
...

answered May 16, 2021 at 17:06

Udendu Abasili

1,2232 gold badges16 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

How to display component using forEach in ReactJS Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related