Erreur ESLint prop-types dans un composant React

Question

Bonsoir à tous,
Dans mon composant Superhero.jsx , tout fonctionne bien mais j'ai un petit souci :
nom,
description,
films = "Aucun film pour ce superhero",
...props
Ces propriétés sont soulignées en rouge et lorsque je passe la souris dessus, cela affiche ceci : 'films' is missing in props validation eslint(react/prop-types)

Louis-Nicolas Leuillet · Accepted Answer

L'erreur vient probablement de la façon dont tu utilises le paramètre props et de la propagation des propriétés. Pour que les props soient passés correctement et éviter les erreurs, tu peux ajuster ton code en ajoutant un destructuring correct dans ta fonction et en t'assurant que tu utilises les bonnes propriétés dans les éléments. Voici une version corrigée de ton code : export default function Superhero({ nom, description, films = ["Aucun film pour ce superhero"], photo = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYOvDs-ry3nz6dC7R-Ut7z78f98QnTkD4bTsWCXman027r53vIrXhiMS7hJ6tUyMjb6mE&usqp=CAU", ...props // Le reste des props doit être récupéré ici }) { return (

); }

Mathurin Kouamé Yao · Answer

Comment je peux résoudre ce problème ?

Louis-Nicolas Leuillet · Answer

Hello
C'est très étrange, peux-tu faire une petite capture d'écran ?

Mathurin Kouamé Yao · Answer

export default function Superhero({
nom,
description,
films = ["Aucun film pour ce superhero"],
photo = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYOvDs-ry3nz6dC7R-Ut7z78f98QnTkD4bTsWCXman027r53vIrXhiMS7hJ6tUyMjb6mE&usqp=CAU",
...props
}) { mes props sont soulignés en rouge

Mathurin Kouamé Yao · Answer

Bonjour.
J'ai fait la même chose en utilisant un destructuring.

Mathurin Kouamé Yao · Answer

export default function Superhero({ nom, description, films = ["Aucun film pour ce super-héros"], photo = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYOvDs-ry3nz6dC7R-Ut7z78f98QnTkD4bTsWCXman027r53vIrXhiMS7hJ6tUyMjb6mE&usqp=CAU", details, ...props }) { return (

{/* carte */} {`${nom}

{nom}

{description}

{/* details */}

alert("En savoir plus")}> En savoir plus

{details}

{/* Films */}

Films:

{film}

); }

Louis-Nicolas Leuillet · Answer

J'avoue avoir des difficultés à comprendre d'où peut venir le problème, comment tu appelles ton composant Superheo ? Tu as regardé le fichier de correction ?

Mathurin Kouamé Yao · Answer

Oui, j'ai bien regardé le fichier de correction.

Mathurin Kouamé Yao · Answer

import Superhero from "./Superhero/Superhero"; import "./Superheros.css"; export default function Superheros(props) { console.log(props); return (

{props.children}

); } children is missing in props validation eslint react/prop-types

Mathurin Kouamé Yao · Answer

Voici ce que j'ai pu trouver comme solution :
/* eslint-disable react/prop-types */

Louis-Nicolas Leuillet · Answer

Effectivement c'est une bonne idée, parfois eslint est un peu capriceux

Mathurin Kouamé Yao · Answer

j'ai remarqué

Erreur ESLint prop-types dans un composant React

Formation Apprendre React 19 en 2026