Valide Réagir élément (ou null) doit être retourné. Vous pouvez avoir retourné indéfini, un tableau ou quelque autre objet non valide

Je suis tout nouveau dans ReactJS et j'ai un problème. Je ne peux pas le résoudre. Il semble que tout est tout droit, mais encore la console me met:

Valide Réagir élément (ou null) doit être retourné. Vous pouvez avoir
retourné indéfini, un tableau ou quelque autre objet non valide.

Voici mon 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(){
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 =
<div className="pokemon--species--list">
{species.map((pokemon,index) => <Pokemon key={pokemon.name} id={index+1} pokemon={pokemon}/>)}
</div>;
}
else if(loading && !fetched){
content = <p> Loading ...</p>;
}
else{
content = <div/>;
}
return (
<div>
{content}
</div>
);
}
}
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">
<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>;
}
}
export default Pokemon;

Merci pour l'aide!

OriginalL'auteur itgirl1234 | 2017-03-01