Featured.render(): A valid React element (or null) must be returned. Rendering a List of items

Question

I am trying to Print a list but I am getting this error and I am not sure what is the problem. It's suggesting that I am returning null, but in my opinion I am returning listItems, which you can see gets list passed from another component.

Full Error:

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

My Snippet:

import React, {Component} from 'react';
class Featured extends Component {
    render() {

        // const items = function (items) {
            const listItems = this.props.items.map((items) =>
                <div className="fh5co-block to-animate">
                    <div className="overlay-darker"></div>
                    <div className="overlay"></div>
                    <div className="fh5co-text">
                        <i className="fh5co-intro-icon icon-bulb"></i>
                        <h2>{items.toString()}</h2>
                        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there
                            live the blind texts.</p>
                        <p><a href="#" className="btn btn-primary">Get In Touch</a></p>
                    </div>
                </div>
            );
        // }
        return (
            listItems
        );
    }
}
export default Featured;

`listItems` is only defined within the function `items`, which you're not using. Just get rid of the function. — Hamms, Aug 24 '17 at 18:26
The error message seems pretty clear, doesn't it? *"You may have returned undefined, **an array** or some other invalid object."*. `listItems` is an array. You cannot return an array. — Felix Kling, Aug 24 '17 at 18:27
Possible duplicate of ['A valid React element (or null) must be returned' error with one of the component in ReactJS](https://stackoverflow.com/questions/37073246/a-valid-react-element-or-null-must-be-returned-error-with-one-of-the-compone) — Felix Kling, Aug 24 '17 at 18:28
@Hamms: function `items` is commented, or you suggesting it is still executing? — noobie-php, Aug 24 '17 at 18:29
@noobie-php my apologies, I misread the code; the problem, as others have pointed out, is that `listItems` is an array — Hamms, Aug 24 '17 at 18:30
Other duplicates: https://stackoverflow.com/q/39277586/218196, https://stackoverflow.com/q/39982696/218196, https://stackoverflow.com/q/43917800/218196, https://stackoverflow.com/q/44060793/218196 ... all listed in the related questions section. Please use the search before you ask a new question. — Felix Kling, Aug 24 '17 at 18:32
@FelixKling: thanks you actually pointed me to the correct direction. — noobie-php, Aug 24 '17 at 18:34

score 1 · Accepted Answer · answered Aug 24 '17 at 18:30

1

You cannot return an array of components from a render function in React - you must return a single component. You could accomplish this fairly easily by just wrapping your listItems in a wrapper div:

return (
  <div>
    { listItems }
  </div>
);

answered Aug 24 '17 at 18:30

Ben Hare

4,365
5
27
44

Featured.render(): A valid React element (or null) must be returned. Rendering a List of items

1 Answers1