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(