“A valid React element (or null) must be returned.” with array.map

Question

I have the Functional React component defined below:

import React from 'react';
import Cell from './FeedCell';
import PropTypes from 'prop-types';

const Feed = (props) => {
        return props.arr.map((type, index) => {
            return (<Cell />)
        })
};

I am getting the error:

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

I feel like this should be obvious but I have tried the solutions presented online but I am missing something.

Answer 1

You are currently returning an array, but you must return a proper React element.

You can wrap your array in a React.Fragment if you don't want a wrapping element in the DOM.

const Feed = (props) => {
  return (
    <React.Fragment>
      {props.arr.map((type, index) => <Cell />)}
    </React.Fragment>
  );
};

Answer 2

You need to wrap your array in some element

If you don't want to wrap your FeedCell s in an actual element, you can use React.Fragment instead:

const Feed = (props) => {
    return (
        <React.Fragment>
            { props.arr.map((type, index) => <Cell />) }
        </React.Fragment>
    );
};

More information here: https://reactjs.org/docs/fragments.html

Answer 3

Can you add more information? - FeedCell code and the parent of Feed.

Try console logging the props and check if props.disputesToRender actually exists or has value in all your render calls.

Check if FeedCell actually returns html or a component that returns an html.

You should also add a <div> or <React.Fragment> to enclose your return method. Since there should always be a single parent on returns.