Générer plusieurs composants NextJS

Question

J'apprends actuellement NextJS et je souhaite créer un site Web qui présente les multiples projets que j'ai créés avec.

J'ai un composant appelé "Tag" qui est un modèle de bouton avec du texte personnalisé et je souhaite le transmettre via des accessoires :

export default function Tag({val}) {
    return(
        <>
            <p>{val}</p>
        </>
    )
}

Ensuite, dans mon composant Block, je souhaite générer un nombre correspondant de composants Tag en fonction du nombre d'éléments du tableau transmis via les accessoires :

import Tag from "./Tag"

export default function Block({tags, name}) {
    return(
        <>
            <section>
                <div></div>
                <h2>{name}</h2>
                <div>
                    {tags.forEach(tag => <Tag val={tag} />)}
                </div>
            </section>
        </>
    )
}

Ensuite, ce composant Block est appelé dans la page d'accueil :

import Block from './components/Block'

export default function Home() {
  return (
    <>
      <Block tags={["Webflow", "UI Design"]} name="Projet 1" />
    </>
  )
}

Le problème est le suivant : aucune étiquette ne s'affiche.

Je pense que le problème est lié à la méthode forEach car lorsque j'essaie de générer une seule étiquette sans la méthode forEach, cela fonctionne bien.

Quel est le problème ?

Answer 1

Vous avez utilisé la méthode forEach, mais rien n'a été renvoyé dans cette fonction. Vous pouvez utiliser la méthode map du tableau.

{tags.map(tag => <Tag val={tag} />)}

const tags = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const result = tags.forEach(tag => tag)
console.log(result) //undefined

const mapResult = tags.map(tag => tag)
console.log(mapResult) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]