ReactJS – The valid React element (or NULL) must be returned. You may have returned undefined, array, or other invalid objects

I am new to ReactJS and I have a problem. I can’t solve it. Everything seems to be fine, but the console still lets me:

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

This is my code:

import React from'react';
import ReactDOM from'react-dom';
import fetch from'isomorphic- fetch';
import Pokemon from'./Pokemon';

class PokemonList extends React.Component {
constructor(props) {
super(props);< br /> this.state = {
species: [],
fetched: false,
loading: false,
};
}
componentWillMount( ){
this.setState({
loading: true
});
fetch('http://pokeapi.co/api/v2/pokemon?limit=151' ).then(res => res.json())
.then(res =>{
this.setState({
species: res.results,
loading: true ,
fetched: true
});
});
}
render() {
const {fetched, loading, species} = this.state;
let content;
//This if seems to be the problem
if(fetched){
content =

{species.map((pokemon, index) => )}
;
}
else if( loading && !fetched){
content =

Loading ...

;
}
else{
content =
;
}
return (

{content}

);
}
}
< br />export default PokemonList;

Pokemon.js

import React from'react';
import ReactDOM from'react-dom' ;


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





{pokemon.name }


< /div>;
}
}

export default Pokemon;

Thanks for the help!

The problem is that you have multiple statements in the rendering, so you need to enclose it in () See the code snippet below. In addition (must be on the same line of the return, otherwise it will be treated as only returning, basically nothing is returned.

class Pokemon extends React.Component {
render() {
var content =

return (
< br />


{content}

Hello



)
}< br />}
ReactDOM.render(, document.getElementById('app'));


I am new to ReactJS, I Encountered a problem. I can’t solve it. Everything seems to be fine, but the console still lets me:

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

This is me The code:

import React from'react';
import ReactDOM from'react-dom';
import fetch from'isomorphic-fetch';
import Pokemon from'./Pokemon';

class PokemonList extends React.Component {
constructor(props) {
super(props);
this.state = {
species: [],
fetched: false,
loading: false,
};
}
componentWillMount(){< br /> this.setState({
loading: true
});
fetch('http://pokeapi.co/api/v2/pokemon?limit=151').then (res => res.json())
.then(res =>{
this.setState({
species: res.results,
loading: true,
fetched: true
});
});
}
render() {
const {fetched, loading, species} = this.state;< br /> let content;
//This if seems to be the problem
if(fetched){
content =

{species.map((pokemon,index) => )}
;
}
else if(loading && !fetched){
content =

Loading ...

;
}
else{< br /> content =
;
}
return (

{content}

);< br /> }
}

export default PokemonList;

Pokemon.js

import React from'react ';
import ReactDOM from'react-dom';


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


< div className="pokemon--spacies--sprite">


{pokemon. name }


;
}
}

export default Pokemon;

< p>Thanks for the help!

The problem is that you have multiple statements in the rendering, so you need to surround it in () to see the following code snippet. In addition (must be returned Otherwise it will be treated as just returning, basically nothing is returned.

class Pokemon extends React.Component {
render( ) {
var content =

return (



{content}

Hello



)
}
}
ReactDOM.render( , document.getElementById('app'));


WordPress database error: [Table 'yf99682.wp_s6mz6tyggq_comments' doesn't exist]
SELECT SQL_CALC_FOUND_ROWS wp_s6mz6tyggq_comments.comment_ID FROM wp_s6mz6tyggq_comments WHERE ( comment_approved = '1' ) AND comment_post_ID = 5962 ORDER BY wp_s6mz6tyggq_comments.comment_date_gmt ASC, wp_s6mz6tyggq_comments.comment_ID ASC

Leave a Comment

Your email address will not be published.