Modernien verkkosovellusten kehityksessä on yleistä renderöidä kokoelmia taustajärjestelmästä saaduista tiedoista. Tämän toteuttamiseen käytetään map()-metodia. map()-metodin sisällä hyödynnetään palautearvoista funktiota ja palautetaan JSX, jolla haluttu tuloste renderöidään.

Tarkastellaan esimerkkiä, joka havainnollistaa toimintaa. Meillä on App-komponentti, joka välittää propin toys, joka on taulukko olioita. 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 tietynlainen merkkaus jokaisen alkion tiedon perusteella.

Koko sovelluksen koodi:

Jos kuitenkin tarkkailemme konsolia, huomaamme varoituksen: Each child in a list should have a unique "key" prop..

Avain (Key)

Key on olennainen merkkijono-ominaisuus, joka on määritettävä luotaessa elementtejä kokoelmaan.

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

On suositeltavaa käyttää tunnisteita, kuten taustajärjestelmästä saatuja id-arvoja, avainpropseina. Tämä käytäntö mahdollistaa Reactin tehokkaan yksittäisten elementtien tunnistamisen ja hallinnan kokoelmassa.

Korjataan aiempi sovelluksemme käyttämällä avainpropseja 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: