Nykyaikaisissa verkkosovelluksissa on tavallista renderöidä kokoelmia taustajärjestelmästä saaduista tiedoista. Tämän toteuttamiseksi käytetään map()-metodia. map()-metodin sisällä hyödynnetään palautefunktiota ja palautetaan JSX halutun lopputuloksen näyttämiseksi.

Tarkastellaan esimerkkiä havainnollistamaan toimintaa. Meillä on App-komponentti, joka välittää propin toys, joka on olioiden taulukko. ToyCard-komponentti käyttää map()-metodia renderöidäkseen jokaisen lelun taulukosta.

// 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} />
  </>
);

Riveillä 13–15 havaitaan map()-metodin käyttö. Sen avulla voidaan käydä läpi jokainen taulukon alkio, poimia sen arvo ja luoda tietynlaista merkkausta kunkin alkion tietojen perusteella.

Sovelluksen koko koodi:

Jos kuitenkin tarkastellaan konsolia, huomataan varoitus: Each child in a list should have a unique "key" prop..

Avain

Avain on olennainen merkkijonoprop, joka täytyy määrittää luotaessa alkioita kokoelmassa.

React käyttää avaimia varmistaakseen elementtien pysyvän identiteetin kokoelmassa. Avaimet mahdollistavat sen, että React tunnistaa, mitkä elementit täytyy päivittää ja luoda uudelleen muutosten yhteydessä sen sijaan, että koko kokoelma luotaisiin uudelleen. Avainten käyttö estää tarpeettoman elementtien uudelleenluonnin, mikä parantaa suorituskykyä.

Huomio

Avaimen täytyy olla yksilöllinen vierekkäisten elementtien kesken. Sen tulee pysyä muuttumattomana ajan myötä.

On suositeltavaa käyttää tunnisteita, kuten backendistä saatuja id-arvoja, key-propeina. Tämä käytäntö mahdollistaa sen, että React tunnistaa ja hallitsee yksittäisiä elementtejä kokoelmassa tehokkaasti.

Korjataan aiempi sovelluksemme käyttämällä key-propeja kohteille:

// 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} />
  </>
);

Rivillä 14: key-prop asetetaan elementille, joka renderöidään useita kertoja tietotaulukon läpi.

Koko sovelluksen koodi: