15 Minutos de React JS – tercera parte

Listas y Keys

Una forma que tenemos para renderizar una lista en React es utilizando el metodo map de Array, ya que podemos hacer que nos retorne JSX.
Tradicionalmente utilizamos Array.map de la siguiente manera:

const numbers = [1, 2, 3, 4, 5, 6];
const mappedNumbers = numbers.map((number) => {
	return number * 2
})

console.log(mappedNumbers)

En React podemos mapear a JSX, por ejemplo:

const numbers = [1, 2, 3, 4, 5, 6];
const mappedNumbers = numbers.map((number) => {
	return (
		<li key={number}> { number } </li>
	)
})

nótese la inclusión de key={number}, dicho identificador debe ser único ya que React lo utilizará para identificar que ítems cambiaron o se agregaron.

Aquí tenemos un ejemplo de un componente , que recibe como props una lista de objetos, cada uno de ellos con las propiedades id y fullName, y la renderiza como un ul:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

/**
 * Un componente que renderiza una lista como un <ul>
 */
class SimpleList extends React.Component {
    constructor(props) {
        super(props)

        // mapeamos el array que recibe por props.lista 
        // como elementos JSX
        this.listItems = props.lista.map((el) => {
        return (<li key={ el.id }>{ el.fullName }</li>)
        })
    }

    render() {
        return (
            <ul>{ this.listItems }</ul>
        )
    }
}



const fullNamesList = [
    {
        id : 1,
        fullName : "Mauro Cifuentes"
    }, 
    {
        id : 2,
        fullName : "Adam Smith"
    }, 
    {
        id : 3,
        fullName : "John Doe"
    }, 
    {
        id : 4,
        fullName : "Gene Porcaro"
    }, 
    {
        id : 5,
        fullName : "Willy Kern"
    }, 
    {
        id : 6,
        fullName : "John Nash"
    } 
]

ReactDOM.render(
    <SimpleList lista={fullNamesList} />,
    document.getElementById('app')
)

Hoy solamente fueron 5 minutos de React, la próxima entrada se viene mas compleja, con Formularios
Hasta la próxima!