Comment éviter l'erreur Objects are not valid as a React child ?

Le framework React est architecturé d'une manière précise, pour que les développeurs puissent comprendre facilement le code et s'y retrouver. Au sein d'un composant, c'est la méthode "render()" qui affiche le composant dans la page web. Cette méthode interprète les balises React afin d'afficher un code HTML. Le message d'erreur "Objects are not valid as a React child" provient de l'interprétation des notations spécifiques à React.

Lorsque vous utilisez React, vous pouvez afficher des objets React directement en l'écrivant entre 2 accolades. Le framework va alors interpréter la variable comme étant un objet React (ou une collection d'objets) et appeler la méthode "render()" de l'objet.

render() {
  return (
     <div className="maDiv">
          {monObjet}
        </div>
    ),
}

Si vous essayez d'utiliser cette annotation pour afficher autre chose qu'un objet React, comme des données stockées sous forme d'objet JavaScript, cela ne fonctionnera pas, car le framework va chercher certains éléments propres aux objets React et ne les trouvera pas. Vous obtiendrez le message d'erreur : "Objects are not valid as a React child".

//Mon objet
{
   "forme": "carré",
   "couleur" : "rouge"
}
//Avec le code plus haut, vous obtiendrez une erreur

Vous devez, dans ce cas, parcourir directement les propriétés de l'objet, comme vous le feriez en langage JavaScript classique.

render() {
  return (
     <div className="maDiv">
          <span>Mon {monObjet.forme} est de couleur {monObjet.couleur}</span>
        </div>
    ),
}
<p>Si vous manipulez un tableau contenant plusieurs objets, alors vous pouvez utiliser la fonction "map()" intégrée directement dans les tableaux JavaScript.</p>
<pre> 
render() {
  return (
     <div className="maDiv">
          <ul>
              {monTableau.map(monObjet => <li>Mon {monObjet.forme} est de couleur {monObjet.couleur}</li>)}
           </ul>
        </div>
    ),
}

JavaScript