Vamos a mostrar una lista de elementos con React Js apartir de un Array utilizando la funcion map.

En un articulo anterior ya vimos una Introduccion a React Js donde vimos como crear un proyecto en react y le hicimos unas modificaciones al proyecto inicial.

Ahora que ya conocemos la estructura de react vamos a editar el archivo App.js.

Codigo

Los siguientes 3 bloques de codigo van juntos en el archivo App.js

Vamos a definir una lista de elementos, por ejemplo animales o mascotas.

const elements = [
  {name: "Gallina", english:"Hen", id:1},
  {name: "Mono", english:"Monkey", id:2},
  {name: "Perro", english:"Dog", id:3},
  {name: "Gato", english:"Cat", id:4},
  {name: "Ardilla", english:"Squirel", id:5},
  {name: "Tigre", english:"Tiger", id:6},
  {name: "Gorila", english:"Gorilla", id:7},
  {name: "Tortuga", english:"Turtle", id:8},
  {name: "Tiburon", english:"Shark", id:9},
  {name: "Ballena", english:"Whale", id:10}
  ];

Despues vamos a crear una funcion que va a tomar el Id de un elemento de la lista para obtener el valor en INGLES o ENGLISH de cada elemento.

function showEnglish(id){
  alert(elements[id-1].english)
}

Esta funcion nos va a mostrar una alerta cada vez que hagamos click en un elemento de la lista.

Y ahora vamos con la funcion App en la cual vamos a generar la lista, asignar el evento CLICK a cada elemento y mostrar el resultado.

function App() {
  /* Funcion para mapear los elementos de la lista y converirlo en elementos LI*/
  const listitems = elements.map(ele =>
    <li key={ele.id} onClick={()=>showEnglish(ele.id)}>
    {ele.name}
    </li>
    );
    /* Mostramos la lista de elementos y mostramos los datos */
  return (
    <div className="App">
    <h1>Lista de Mascotas</h1>
     <ul>{listitems}</ul>
    </div>
  );
}

export default App;

Resultado

Para ver el resultado tenemos que ejecutar los comandos.

cd applist1
npm start