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

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

return
   

     ...
   

It will be treated as:

return ;    //Automatic semicolon insertion


   ...

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 

   ...
       

Use this part it will work:

class Pokemon extends React.Component {
  render() {
    const {pokemon, id} = this.props;
    return(
      

        

          

            
          
          
 {pokemon.name }
        
      
);
  }
}