React. Props error when try to use forEach function

Question

When I try to send the props from parent component Row by condition via forEach iterator I even get the undefined in the child component.

I cannot figure out what is the problem is...

 // Parent component
 // ... class Row extends...
     // ... some code
      render() {
        const canSelector = {
           selectedItems: []
        }
        return (
            <Row showImage={canSelector.selectedItems.forEach(item => { 
                   item.ID === i ? 'item' : 'error'}) }
            />
          }            
        )


// Child component for test
// ... class XXX extends...
         // ... some code
         const { showImage } = this.props
         console.log(showImage); // gets "undefined", intead of "error" string

Answer 1

Array.prototype.forEach() doesn't return anything, that is the reason that you are getting undefined as the value of showImage in your <Row /> component.

I assume that you are trying to check if the item.ID has the same value as i , and return 'item' or 'error' accordingly?

You might want to check Array.prototype.findIndex() instead.

You can do something like this:

<Row showImage={canSelector.selectedItems.findIndex(item => item.ID === i) > -1 ? 'item' : 'error'} />

findIndex() will return the index of the first item in the array that satisfy the condition provided, else it will return -1 .