Guia de primer Proyecto parte 3

¡Construye tu primera aplicación web con ReactJS! 🔥 — Parte 3


Hacer mapping de elementos es como hacer una lista

Una vez que has aprendido a utilizar el estado de tu aplicación en React, lo siguiente es aprender a darle dinamismo a los datos, por lo que si
estás aquí, sé que vienes de la parte anterior de este tutorial.
En aplicaciones que están en producción en el mundo real, normalmente existen listas de datos por todos lados, y suele ocurrir cuando por
ejemplo:

1. Tienes listas de usuarios o contenido.

2. Quieres mostrar diversos elementos similares, pero con cambios mínimos.
3. Tienes elementos estáticos, a los cuáles sólo quieres cambiarle el contenido.

En todas estas últimas situaciones, por lo general necesitas adaptar la cantidad de componentes que aparecen en la interfaz en función a la
cantidad de datos que tienes.

Y bueno, ¿cómo demonios hago eso?.

Con el uso del mapeo de arreglos en React, que sirve como una de las herramientas principales para manejar datos en la interfaz, y que es uno
de los conceptos básicos de React.

Step 3 — Mapeo de Elementos

Una parte fundamental del manejo de datos en la interfaz, es aprender a reutilizar componentes para representar grupos de datos. Es decir,
supongamos que tenemos datos de videos en nuestra aplicación, y que vienen en un arreglo con esta estructura:


const videos = [

previewImage: "https://source.unsplash.com/random",

title: "Lorem ipsum",

description: "Lorem ipsum dolor sit amet"

},

...

},

...

En este arreglo, cada objeto representaría un video, por lo que habría de renderizar un hipotético componente de video por cada uno de ellos,
para tener algo mas o menos similar a esto: 



Captura de Youtube readaptada 
En nuestro caso, lo que queremos eventualmente hacer es que cada una de las tareas que escribamos en el input se enlisten debajo de éste,
como una serie de tareas, por lo cuál, esta idea de mapeo de elementos se puede abstraer fácilmente a nuestro caso de uso.

Lo primero que tenemos que hacer, es añadir a nuestro estado local, una variable llamada “Tasks”, que es donde se va a contener la lista de
tareas que iremos escribiendo, en forma de un arreglo.

El estado de tu aplicación debería verse ahora de esta forma:





Ahora, de forma similar a como hicimos para manejar el cambio de valor en el input, a través del evento onChange, debemos de encontrar una
forma de agregar elementos a esta variable del estado, por lo que es necesario un evento que entienda cuando hacemos submit del input.

Para lograr lo anterior, debemos envolver nuestro input en una etiqueta <form>, para convertir nuestra tarea en un formulario, y a su vez, 
hacer uso del evento onSubmit que tiene de forma nativa la etiqueta form, y que se acciona en el momento que hacemos enter con nuestro
teclado.

A este evento onSubmit le vamos a añadir de momento una función (que todavía no hemos creado) para manejar este submit.

Lo siguiente debería verse reflejado así:

<form onSubmit={this.handleSubmit}>

<input

onChange={this.handleTaskChange}

type="text"

className="new-task"

/>

</form>
A continuación, vamos a diseñar nuestra función de submit para almacenar los datos del input en nuestro arreglo de tareas en el estado. No
obstante, si ya has intentado probar tu aplicación, te darás cuenta que al hacer enter en tu input, la página se recargará, y perderás los datos
previos.

La razón por la que ocurre esto, es porque el evento onSubmit, detona por defecto la recarga del navegador, dado que se supone que cada
formulario debería enviar datos a un servidor. Sin embargo, eso no nos interesa por ahora, así que agregaremos un preventDefault al evento,
evitando de esta forma que realice ese page reloading.

A continuación la función correspondiente:

handleSubmit = (event) => {

event.preventDefault();

let newTasks = this.state.tasks;

newTasks.push(this.state.newTask)

this.setState({

newTask: "",

tasks: newTasks

})

Esta función, guarda una copia de las tareas actuales en “newTasks”, para posteriormente empujar el contenido del input dentro del arreglo, y
después, reinicia el contenido del input, para que no publiquemos una tarea más de dos veces.

Para que el reinicio del input sea efectuado, debemos pasarle el valor como un atributo al tag input, de la siguiente forma:





Añadirle como valor, la variable de estado controlada por el input nos permitirá reiniciarlo cuando publiquemos alguna tarea.

Ahora sí, cada que hagamos enter en nuestro input, se reiniciará la tarea, y se añadirá al arreglo del estado donde están guardadas las tareas,
pero, ¿cómo le hacemos ahora para visualizarlas?

Aquí es donde entra la parte interesante de este bloque: vamos a mapearlos.

La forma de hacer esto, es con la función map que viene con el prototipo de arreglo en javascript, por lo que es importante señalar que la
única forma de mapear un conjunto de datos es que estos vengan en forma de arreglo, el cuál, de hecho, es nuestro caso de uso.

La función .map() recibe como único parámetro una función que se va a ejecutar por cada elemento del arreglo en cuestión (normalmente un arrow
function), por lo que podemos deducir que, para este caso, queremos que por cada tarea en el arreglo, nos retorne un componente que
contenga los datos de ese arreglo (es lo que viene justo después de la flecha en el ejemplo de abajo).

Para mapearlo, tendremos que mandar a llamar nuestro arreglo de tareas, y hacerle un .map(). No obstante, ¿cómo diablos hacemos eso?

La respuesta es que, nuevamente haremos uso de JSX y su propiedad de incluir Javascript dentro del HTML con el uso de corchetes, y que
utilizamos para mostrar la variable de “newTask” en el paso 2.

Lo anterior es una ventaja poderosa de JSX, que los que nos dedicamos a desarrollar con React, utilizamos en casi cualquier componente,
precisamente para estos casos.

Dicho esto, la forma de hacer el mapping dentro de nuestro componente, es insertando el siguiente bloque de código dentro de nuestra
aplicación, justo debajo del <h2> que hace display de {this.state.newTask}:

{

this.state.tasks.map(task =>

<div className="task-container">

<h3 className="task">{task}</h3>

</div>

La función que contiene el punto map recibe como primer parámetro el elemento sobre el cuál se encuentra iterando en cada ejecución, así
que, particularmente con nuestro arreglo de tareas, la función recibe cada una de las tareas contenidas en el arreglo, la que, a su vez, estamos
colocando dentro del tag <h3> con {task}. 

Los estilos correspondientes a los nuevos elementos que hemos agregado son los siguientes:
.task-container {

width: 100%;

background-color: azure;

margin-bottom: 8px;

font-size: 16px;

border-left: 8px solid aqua !important;

}.task {

margin: 0;

padding: 10px 0px 10px 10px;

Al final, tu componente debería de verse así:








Captura completa del componente hasta este punto

Hasta ahora, si ejecutaste de forma correcta todo el tutorial, podrás ver el resultado funcionando de la siguiente forma (por cierto, cambié
el hello world por to do list en el título):


 

¡Congrats! Hasta ahora ya sabes cómo puedes iterar componentes dentro de tu aplicación, con un ejemplo sencillo.

Cabe destacar que esta es una de las grandes ventajas de utilizar componentes para el desarrollo de tu aplicación, dado que puedes recibir los
datos desde una fuente de datos, y mostrarlos todos sin tener que escribirlos uno por uno.
Este concepto lo puedes escalar hasta donde tú quieras, permitiendo administrar aplicaciones robustas, con gran cantidad de datos, vistas y
elementos.

Conclusión
La versatilidad de una aplicación se puede medir en el dinamismo con el que maneja los datos, y bajo este concepto, podríamos decir que lo
ideal es aprender a realizar interfaces que respondan de acuerdo a los datos que reciben.

El mapeo de datos es una herramienta de todos los días en el ecosistema de React, pero súper básica para construir aplicaciones complejas.

En esta parte del tutorial vimos un ejemplo muy sencillo, pero que te puede dar pie y sustento suficiente para intentar cosas más atrevidas
después.

Última modificación: domingo, 12 de diciembre de 2021, 10:02

 