Reputation: 89
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.
Upvotes: 1
Views: 23
Reputation: 1213
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])}/>
)
})
)
}
...
Upvotes: 1