Visualización de datos de lista

4 minutos

Como React se basa en JSX, que es una combinación de JavaScript y XML/HTML, puede generar HTML de forma dinámica, totalmente integrado con su JavaScript.

Escenario

Quiere mostrar la lista de ingredientes, incluyendo la adición de una línea de tachado para cualquier elemento marcado como preparado. Para ello, cree un nuevo archivo .css para el estilo y luego un nuevo componente para su lista de ingredientes.

Creación del nuevo estilo

Cree un nuevo archivo en src denominado IngredientList.css.

Agregue el código siguiente a IngredientList.css:

.prepared {
    text-decoration: line-through;
}

Creación del componente

Dado que el código HTML está integrado con JavaScript en JSX, se basa en JavaScript para la lógica y el bucle. Para mostrar un conjunto de elementos contenidos en una matriz, normalmente se usa la función map. map está diseñado para crear una matriz de elementos basada en el resultado de una llamada de función. Si desea mostrar una lista de títulos en una lista ordenada, use map y la sintaxis { } que ha aprendido anteriormente.

Dentro de src, cree un archivo denominado IngredientList.jsx.

Agregue el siguiente código al archivo:

import './IngredientList.css'
import React from 'react';

function IngredientList(props) {
    // Create the list items using map
    const ingredientListItems = props.ingredients.map((ingredient, index) => {
        return (
            // Return the desired HTML for each ingredient
            <li key={index} className={ ingredient.prepared ? 'prepared' : '' }>
                { ingredient.name }
            </li>
        );
    });

    // return the HTML for the component
    // ingredientListItems will be rendered as li elements
    return (
        <ul>
            { ingredientListItems }
        </ul>
    );
}

export default IngredientList;

Exploración del código

Empiece por crear una matriz de cadenas para que contenga la lista de ingredients. Desea que cada ingrediente se muestre como un elemento de lista. Lo implementa mediante map.

Como se ha resaltado anteriormente, map se comporta de forma similar a una instrucción for each. Ejecuta la función una vez para cada elemento de la matriz. Quiere mostrar una colección de elementos HTML li, así que devuelve el JSX apropiado, con {ingredient} dentro de li.

Actualización de la aplicación para usar IngredientList

Vamos a mostrar la lista de ingredientes.

Abra src/app.jsx.
Después de la línea en la que pone TODO: Import IngredientList, agregue el siguiente código:
```
// TODO: Import IngredientList
import IngredientList from './IngredientList'
```
Después de la línea en la que pone TODO: Add IngredientList component, agregue el siguiente JavaScript:
```
{/* TODO: Add IngredientList component */}
<IngredientList ingredients={recipe.ingredients} />
```

Mostrar los resultados

Guarda todos los archivos. El explorador actualizará y mostrará automáticamente las nuevas actualizaciones. Observe la lista de ingredientes, donde los dos últimos elementos aparecen como preparados (tachados).

Screenshot of list of ingredients.