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

Question

I\'m just new in ReactJS and I have a problem. I can\'t solve it. It seems everything is all right, but still console puts me:

A valid React element

Answer 1

This error is because of the way that you are giving value to "content"

When you are setting a value some kind of "html" as a value, you have to use this syntax:

content = (<div/>);

try it and let me know if it works!

good luck!

Answer 2

The problem is that you have multiple statements in render and hence you need to surround that within () See the below snippet. Also the ( must be on the same line as return otherwise it will be treated a return only which is basically returning nothing.

class Pokemon extends React.Component {
  render() {
    var content = <div></div>
    return (
      <div className="pokemon--spacies">
        <div className="pokemon--spacies--container">
          <div className="pokemon--spacies--sprite">
            {content}
          </div>
          <div className="pokemon--spacies--name"> Hello</div>
        </div>
      </div>
    )
  }
}
ReactDOM.render(<Pokemon/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

Answer 3

Problem is in the return statement in Pokemon component, Because when you use:

return
   <div>
     ...
   </div>

It will be treated as:

return ;    //Automatic semicolon insertion

<div>
   ...
</div>

And that means you are not returning a valid element.

Check this answer for more details about Automatic Semicolon Insertion.

Solutions:

Wither wrap all the elements by () like this:

return (
 ....
)

or put the div in the same line of return, like this:

return <div>
   ...
       </div>

Use this part it will work:

class Pokemon extends React.Component {
  render() {
    const {pokemon, id} = this.props;
    return(
      <div className="pokemon--spacies">
        <div className="pokemon--spacies--container">
          <div className="pokemon--spacies--sprite">
            <img src={`/public/sprites/${id}.png`} />
          </div>
          <div className="pokemon--spacies--name"> {pokemon.name }</div>
        </div>
      </div>);
  }
}

Answer 4

When you are using ES6 syntax's make sure you do the following

const App = ()=> (
  <div>
        <p>Adam</p>
        <p>Alex</p>
  </div>
)

Here the "()" is important and it says the bracketed is the jsx returned

If you are having a single line return then you can do this

const App = ()=> <h1>Hello</h1>