El bucle for en React

1. Implementar mapa for con el método .map() en React
2. Bucle for de JavaScript
3. Función invocada inmediatamente

Tratar con datos complejos de back-end es parte del trabajo del desarrollador de front-end. A menudo, los datos incluyen una lista de objetos que representan componentes u otros bloques de construcción para la interfaz de usuario.

Por ejemplo, al crear una tienda en línea, es probable que los datos contengan la lista de productos que deben aparecer en el sitio web. Revisar manualmente la lista y crear componentes uno por uno es ineficaz por varias razones. Por ejemplo, ¿qué hará si un producto se elimina o se agrega a la lista? No puede volver atrás y actualizar su archivo JSX cada vez.

Hay varias formas de repasar la lista y representar componentes o elementos HTML automáticamente.

Implementar mapa for con el método .map() en React

El método .map(), introducido en ES6, es la forma predeterminada de recorrer un array y devolver un elemento JSX válido que contiene datos de cada elemento del array. Los desarrolladores suelen utilizar este método para crear componentes personalizados, así como elementos HTML normales.

Aunque hay otras formas de realizar un bucle, la mayoría de los desarrolladores de React usan el método .map() porque es fácil de leer, escribir y mantener. A continuación, se explica cómo recorrer un array de objetos y representar los datos del usuario en la pantalla:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    console.log('App started');
    return <div>
    {data.map(person => <p key={person.name}>{`${person.name}, ${person.age} years old`}</p>)}
    </div>
  }
}

Producción :

John Doe, 44 years old

Jane Doe, 45 years old

Recuerde que el método map() se ejecutará dos veces en este ejemplo y devolverá un elemento de párrafo cada vez. Por eso es fundamental envolver sus resultados con un <div></div>. Cada componente debe devolver un contenedor principal, con tantos elementos secundarios como desee.

Atributo key

Tenga en cuenta que cada elemento creado con el método .map() debe tener un identificador key, establecido en un valor único.

<p key={person.name}>{}</p>)

React no recomienda utilizar el valor index para generar un valor único para la propiedad key.

Transmitir props

Si va a utilizar el método .map() para renderizar varios componentes, también puede pasar los props.

Digamos que estamos intentando renderizar varios componentes Product. Así es como pasaríamos los props:

return <div>
    {data.map(product => <Product price={product.price} name={product.name}></Product>)}
    </div>

Bucle for de JavaScript

Otra forma de hacer un bucle sobre un array es usar el bucle for. Si elige este enfoque, debe realizar el bucle por encima del bloque return.

Así es como se vería el código:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    let persons = [];
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return <div>
    {persons}
    </div>
  }
}

En comparación con .map(), este enfoque es más detallado y más difícil de entender. Sin embargo, los resultados serían los mismos.

Función invocada inmediatamente

Es técnicamente posible usar el bucle for en su declaración return, pero tendría que crear una función y usar el bucle for como cuerpo. Una vez que haya terminado de escribir la función, debe seguirla con corchetes () para llamarla inmediatamente. Así es como funcionaría:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    return 
    <div>
    {function() {
      let persons = []
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return persons
    }()
    }</div>
  }
}