React.js : faut-il utiliser forEach en JSX ?
Le JSX est une extension du langage JavaScript utilisée par le framework ReactJS. Elle permet de mêler du HTML, du JavaScript et la notation propre au framework. On peut ainsi utiliser du HTML directement dans la méthode "render()" des composants React. Le JSX permet d'utiliser l'instruction "forEach" mais on ne peut pas l'utiliser dans tous les cas.
L'instruction "forEach" permet de parcourir un tableau d'éléments afin d'effectuer un traitement dessus. Il s'utilise donc de la même manière que dans un autre langage. Avec le JSX, on définit la variable qui va contenir l'élément parcouru, puis on lie une fonction qui effectuera le traitement avec cette variable.
{this.props.monTableau.forEach(element => { console.log(element); })}
Si vous souhaitez utiliser la fonction "forEach" pour de l'affichage, ce n'est pas une bonne option. La méthode "forEach" ne retourne rien. Les éventuelles balises que vous allez insérer ne seront donc pas affichées. À la place, nous vous conseillons la méthode "map()". Elle prend en paramètres 2 variables. La première va être la variable qui va contenir l'élément parcouru et la deuxième correspondra à l'index de cet élément dans le tableau. Vous devrez utiliser l'instruction "return" pour que les balises soient affichées dans votre composant.
class monComposant extends Component { render(){{this.props.titre}
{this.props.monTableau.map((element, i) => { console.log(element); // Affichage return (element.libelle
) })} }
JavaScript
- Javascript cliquer sur un bouton
- Comment résoudre l'erreur "DevTools failed to load SourceMap: Could not load content for chrome-extension://..." ?
- A component is changing an uncontrolled input to be controlled
- Node js fetch is not defined
- Comment corriger l'erreur "npm WARN old lockfile The package-lock.json file was created with an old version of npm" ?
- Comment vérifier qu'un tableau (array) contient une chaîne (string) en TypeScript ?
- React Hooks : useEffect() est appelé deux fois même si un tableau vide est utilisé comme argument, comment faire ?
- Récupérer paramètre url javascript
- TypeScript : comment éviter l'erreur Type 'XX' is missing the following properties from type 'Y[]' ?
- Comment résoudre l'erreur Could not resolve dependency: npm ERR! peer @angular/compiler@"11.2.8"" ?
- String to json
- Comment vérifier qu'une valeur est non-nulle et n'est pas une chaine (string) vide en JavaScript ?
- L'objet a peut-être la valeur 'undefined'
- Comment corriger l'erreur "TypeError: Cannot read properties of undefined (reading 'map')" ?
- Comment gérer la navigation programmatique avec react-router ?
- Comment vérifier qu'une chaîne (string) est vide en JavaScript ?
- Comment résoudre l'erreur Node.js "SyntaxError: Cannot use import statement outside a module" ?
- Comment vérifier une adresse mail en JavaScript ?
- React dotenv
- Qu'est-ce qu'un 'type: module' dans un fichier package.json ?
- Expected an assignment or function call and instead saw an expression
- Response to preflight request doesn't pass access control check: it does not have http ok status