Comment utiliser un composant JSX et résoudre l'erreur "'Element[]' is not a valid JSX element" ?
Le framework React possède sa propre manière de fonctionner. Un des éléments qui rend l'écriture du code avec le framework différente du JavaScript pur est le JSX. Cette extension du langage JavaScript permet de faire de nouvelles notations dans le framework. Elle permet notamment d'imbriquer des éléments HTML avec du code JavaScript. Le message "'Element[]' is not a valid JSX element" est lié au JSX et à son utilisation dans le composant React.
Lorsque vous créez un composant, la fonction qui le définit ne doit retourner qu'un seul objet de la classe JSX "Element". Si vous essayez de retourner un tableau d'éléments JSX, vous obtiendrez alors le message d'erreur "'Element[]' is not a valid JSX element".
function MaListe(): JSX.Element {
return maListe.map(objet => (
<li>{objet.nom}</li>
)}
}
Cette fonction va retourner une série d'éléments avec des éléments de liste ([<li>1</li>,…]), ce qui n'est pas possible pour un composant. Le langage JSX fournit une solution pour permettre d'éviter cette erreur. Utiliser la notation "<>…</>" permet d'encapsuler dans un seul élément votre code. Un composant doit systématiquement retourner un fragment. Cela permet au framework de mettre en place l'état et les "Hooks" sur le composant.
function MaListe(): JSX.Element {
<>{
maListe.map(objet => <li>{objet.nom}</li>)
}</>
}