Afficher la liste des objets avec des propriétés dans JSX

Question

J'ai le code suivant dans mon composant React :

<div className="mainApp">
            <div className="pkgsList">
                {pkgData.map((p) =>
                    <h3 key={p.name}>{p.name}</h3>
                )}
                    
            </div>
        </div>
    )</pré>
<p>Dans ce cas, <code>pkgData</code> est un tableau d'objets qui tente de décrire le package dans ce scénario. Chaque objet contient une propriété de chaîne <code>name</code> et une propriété de tableau <code>sources</code>, où chaque élément est également un objet. Je souhaite imprimer les éléments dans <code>sources</code> sous l'élément <code>h3</code> (chaque élément a plusieurs propriétés), mais je n'arrive pas à comprendre comment en ajouter davantage. le HTML/JSX multiple ci-dessus - toute aide serait grandement appréciée. </p>
<p>J'ai essayé d'appeler la carte pour chaque p, mais que je l'enveloppe dans <code>()</code> ou simplement <code>{}</code> J'obtiens une erreur</p>
<pre class="brush:php;toolbar:false;">{p.map((s) => {
                       
})</pré>
<p>Le code div généré sera donc : </p>
<pre class="brush:php;toolbar:false;"><div className="pkgList">
                {pkgData.map((p) =>
                    <h3 key={p.name}>{p.name}</h3>
                    {p.map((c) => {
                        
                    })
                )}
            </div>

Mon application React n'est pas autorisée à se compiler correctement.

Answer 1

Comme les composants normaux, vous ne pouvez renvoyer qu'un seul élément jsx dans la carte. Si vous souhaitez afficher plusieurs éléments dans la fonction map, vous pouvez envelopper le code dans un extrait de réaction comme celui-ci :

<div className="mainApp">
    <div className="pkgsList">
        {pkgData.map((p) => (
            <> {/* <- this is a fragment */}
                <h3 key={p.name}>{p.name}</h3>
                {p.sources.map((s) => (
                    <>{/* render source here */}</>
                ))}
            </>
        ))}
    </div>
</div>

Answer 2

Erreur de carte

Tout d'abord, votre carte imbriquée à l'intérieur pkgData.map est fausse. Parce que p en soi n'est pas un tableau. La carte devrait ressembler à ceci,

{p.sources.map((c) => {
    ...
    }
  )}

Erreur JSX

Deuxièmement, comme @David l'a dit dans les commentaires, vous ne pouvez pas avoir plusieurs éléments de haut niveau en raison de la façon dont JSX fonctionne sous le capot. Par exemple le code

<div className="mainApp">
  <div className="pkgsList">
    {pkgData.map((p) => 
      <h3 key={p.name}>{p.name}</h3>                    
    )}
  </div>
</div>

Équivalent à ceci

<div className="mainApp">
  <div className="pkgsList">
    {pkgData.map((p) => {
      return React.createElement("h3", {key: p.name}, p.name)
      }                    
    )}
  </div>
</div>

Donc, si vous renvoyez plusieurs éléments JSX au niveau supérieur, React.createElement ne fonctionnera pas. Par conséquent, vous devez envelopper le contenu au niveau supérieur en utilisant certaines balises telles que fragments(<>), div, etc.

Par exemple,

<div className="mainApp">
  <div className="pkgsList">
    {pkgData.map((p) =>
      <>
        <h3 key={p.name}>{p.name}</h3>
        {p.sources.map((c) => 
          <p>{c.something}</p>
        )} 
      </>
    )}
  </div>
</div>

Pour référence uniquement : https://react.dev/reference /react/createElement#creating-an-element-without-jsx