Vid arbete med moderna webbapplikationer är det vanligt att rendera samlingar av data som tas emot från backend. För att uppnå detta använder vi metoden map(). Inom metoden map() använder vi en callback-funktion och returnerar JSX för att rendera önskat resultat.

Låt oss ta ett exempel för att illustrera hur det fungerar. Vi kommer att ha en App-komponent som skickar propen toys, en array av objekt. ToyCard-komponenten kommer att använda metoden map() för att rendera varje leksak i arrayen.

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

På raderna 13-15 ser vi användningen av metoden map(). Den gör det möjligt att iterera genom varje objekt i arrayen, extrahera dess värde och generera specifik markup baserat på datan för varje objekt.

Komplett appkod:

Om vi däremot tittar i konsolen kan vi se att vi får varningen: Each child in a list should have a unique "key" prop..

Nyckel

Key är en avgörande strängprop som måste tilldelas när element skapas inom en samling.

React använder nycklar för att säkerställa en stabil identitet för element i en samling. Dessa nycklar gör det möjligt för React att identifiera vilka element som måste renderas om och återskapas vid förändringar, istället för att återskapa hela samlingen. Användning av nycklar förhindrar onödig återskapning av element, vilket leder till förbättrad prestanda.

Det är vanligt att använda identifierare, såsom id-värden från backend-data, som key-props. Denna praxis gör det möjligt för React att effektivt identifiera och hantera individuella element inom en samling.

Låt oss åtgärda vår tidigare app genom att använda key-props för objekten:

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li key={toy.id}>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Rad 14: key-propen anges på det element som kommer att renderas flera gånger inom en array av data.

Komplett appkod: