A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object?

Question

React

There is such a component on (React Native):

class PointsMaker extends Component {

    shouldComponentUpdate(nextProps) {
      return nextProps.update
    }

    render() {
        const track = this.props.track;
        const update = this.props.update;

        if (track.length !== 0 && update) {
            this.props.shouldUpdate(false);

              track.forEach((value, key) => {
                if (value.length !== 0)
                return (
                  <VehicleMarker target={key}/>
                );

                else return null;
              });

        }
        else {
            return null;
        }


    }

  }

But at the time of rendering, the console swears:
A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
This is strange, because before that I quite calmly sorted through the array using the map() method inside render(), however, this enumeration was also wrapped inside . How to be?

Answer 1

You are iterating over with the Array.prototype.forEach() method which returns nothing. And what is returned from the forEach callback also disappears into the void.

render() {
  const track = this.props.track;
  const update = this.props.update;

  if (track.length !== 0 && update) {
    this.props.shouldUpdate(false);
    return track.map((value, key) => value.length !== 0 ? <VehicleMarker target={key}/> : null;);
  } else {
    return null;
  }
}

The forEach() method executes the callback function once for each array element; unlike the every() and some() methods, it always returns undefined.

©