Introducció

En React, sovint necessitem renderitzar llistes d'elements basades en dades dinàmiques. Això es fa utilitzant la funció map() de JavaScript per iterar sobre un array i retornar un nou array de components React. A més, per assegurar-nos que React pugui gestionar eficientment la renderització d'aquests elements, cada element de la llista ha de tenir una "clau" única.

Renderitzar llistes

Exemple bàsic

Suposem que tenim un array de fruits i volem renderitzar una llista d'aquests fruits en un component React.

import React from 'react';

const fruits = ['Poma', 'Plàtan', 'Taronja', 'Maduixa'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

export default FruitList;

Explicació del codi

Array de fruits: Tenim un array simple de strings que representa diferents fruits.
Funció map(): Utilitzem la funció map() per iterar sobre l'array fruits i retornar un nou array d'elements <li>.
Prop key: Cada element <li> té una prop key que és única per a cada element. En aquest cas, utilitzem l'índex de l'element com a clau.

Importància de les claus

Les claus ajuden React a identificar quins elements han canviat, s'han afegit o s'han eliminat. Això és crucial per a la renderització eficient de llistes dinàmiques. Sense claus, React hauria de re-renderitzar tota la llista cada vegada que hi ha un canvi, el que pot ser molt ineficient.

Exemple amb objectes

Suposem que tenim una llista d'objectes que representen usuaris, i cada usuari té un id únic.

import React from 'react';

const users = [
  { id: 1, name: 'Anna' },
  { id: 2, name: 'Joan' },
  { id: 3, name: 'Maria' },
];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

Explicació del codi

Array d'objectes: Tenim un array d'objectes, on cada objecte representa un usuari amb un id i un name.
Prop key: Utilitzem el id de cada usuari com a clau per als elements <li>. Això assegura que cada clau sigui única i consistent.

Errors comuns

Utilitzar l'índex com a clau: Utilitzar l'índex de l'array com a clau pot ser problemàtic si l'ordre dels elements canvia, ja que les claus no seran consistents.
Claus no úniques: Assegura't que les claus siguin úniques dins de la llista. Claus duplicades poden causar comportaments inesperats.

Exercici pràctic

Enunciat

Crea un component TaskList que renderitzi una llista de tasques. Cada tasca ha de tenir un id únic i un title. Utilitza l'array següent com a dades inicials:

const tasks = [
  { id: 1, title: 'Comprar menjar' },
  { id: 2, title: 'Estudiar React' },
  { id: 3, title: 'Fer exercici' },
];

Solució

import React from 'react';

const tasks = [
  { id: 1, title: 'Comprar menjar' },
  { id: 2, title: 'Estudiar React' },
  { id: 3, title: 'Fer exercici' },
];

function TaskList() {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

export default TaskList;

Resum

Les llistes en React es renderitzen utilitzant la funció map() de JavaScript.
Cada element de la llista ha de tenir una prop key única per a una renderització eficient.
Les claus ajuden React a identificar quins elements han canviat, s'han afegit o s'han eliminat.
Evita utilitzar l'índex de l'array com a clau, especialment si l'ordre dels elements pot canviar.

Amb aquests conceptes, estàs preparat per treballar amb llistes i claus en React de manera eficient i efectiva.

Llistes i claus

Introducció

Renderitzar llistes

Exemple bàsic

Explicació del codi

Importància de les claus

Exemple amb objectes

Explicació del codi

Errors comuns

Exercici pràctic

Enunciat

Solució

Resum

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa