Rendering Lists

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
export default function List() {
  const listItems = people.map(person =>
    <li>{person}</li>
  return <ul>{listItems}</ul>;
Notice the sandbox above displays a console error:
Console
Warning: Each child in a list should have a unique “key” prop.
You’ll learn how to fix this error later on this page. Before we get to that, let’s add some structure to your data.
Filtering arrays of items 
This data can be structured even more.
const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
}, {
  id: 3,
  name: 'Percy Lavon Julian',
  profession: 'chemist',  
}, {
  id: 4,
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
}];

Let’s say you want a way to only show people whose profession is 'chemist'. You can use JavaScript’s filter() method to return just those people. This method takes an array of items, passes them through a “test” (a function that returns true or false), and returns a new array of only those items that passed the test (returned true).
You only want the items where profession is 'chemist'. The “test” function for this looks like (person) => person.profession === 'chemist'. Here’s how to put it together:
Create a new array of just “chemist” people, chemists, by calling filter() on the people filtering by person.profession === 'chemist':
const chemists = people.filter(person =>
  person.profession === 'chemist'
);

Now map over chemists:
const




    
 listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession + ' '}
       known for {person.accomplishment}
     </p>
  </li>
);

Lastly, return the listItems from your component:
return <ul>{listItems}</ul>;

App.jsdata.jsutils.js
App.js
 ResetFork
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 =>
        src={getImageUrl(person)}
        alt={person.name}
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        known for {person.accomplishment}
  return <ul>{listItems}</ul>;