Rendering lists

In React each item in a rendered list must have a unique key. This key should be unchanging and not defined by the items order. A good example of where to get this key from is eather an id of an object in a list, or to get the id from the object if it comes from the DB.

It is considered bad practice to generate the key on the fly since if you reload the page the id will get lost, and any changes the user made will become lost too.

Map

Go though a list and get all items from it

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>{person}</li> // note that key must be the last prop 
  );
  return <ul>{listItems}</ul>;
}

Filter

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const chemists = people.filter(person =>
    person.profession === 'chemist'
  );
  const listItems = chemists.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        known for {person.accomplishment}
      </p>
    </li>
  );
  return <ul>{listItems}</ul>;
}