Uso de tipos de datos complejos como props

Completado

El componente props no está limitado a cadenas, sino que puede usar objetos de JavaScript. Puede utilizarlo para crear componentes más sólidos.

Escenario

Desea actualizar RecipeTitle para mostrar los comentarios de la receta. Si el promedio de clasificación es inferior o igual a 3,5, querrá que la clasificación sea roja. Si es mayor que 3,5, querrá que la clasificación sea verde. Use el operador ternario y las clases CSS para ayudar a administrar la visualización.

Creación de CSS

Al importar CSS en un componente individual, puede evitar conflictos de nombres y otros problemas que suelen surgir con CSS. Aquí, empiece por crear un archivo.css para RecipeTitle.

1. Agregue un nuevo archivo a la carpeta src denominada RecipeTitle.css.

2. Agregue el siguiente CSS a src/RecipeTitle.css:

   .red {
       color: red;
   }
   .green {
       color: green;
   }
   

Actualización de RecipeTitle

Ahora, actualice RecipeTitle para importar el CSS y mostrar los valores.

1. Abra src/RecipeTitle.jsx.

2. En la parte superior del archivo, agregue la siguiente línea de código:

   import './RecipeTitle.css';
   

3. Bajo la línea en la que pone <h2>{ props.title }</h2>, agregue el código siguiente:

   <h3 className={ props.feedback.rating <= 3.5 ? 'red' : 'green' }>
       { props.feedback.rating } from { props.feedback.reviews } reviews
   </h3>
   

Exploración del código

Ha empezado a importar el archivo CSS que creó. Ha agregado un nuevo elemento h3 para mostrar feedback. Ha usado el operador ternario para establecer la clase basada en rating.

Todo el contenido de ReactTitle.jsx ahora debe ser:

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

// TODO: Create RecipeTitle component
function RecipeTitle(props) {
    return (
        <section>
            <h2>{ props.title }</h2>
            <h3 className={ props.feedback.rating <= 3.5 ? 'red' : 'green' }>
                { props.feedback.rating } from { props.feedback.reviews } reviews
            </h3>
        </section>
    )
};

export default RecipeTitle;

Actualización del componente de la aplicación para pasar las clasificaciones

Actualice RecipeTitle para establecer el atributo feedback.

1. Abra src/App.jsx.

2. Modifique el elemento RecipeTitle existente para agregar el atributo feedback:

   <RecipeTitle title={ recipe.title } feedback={ recipe.feedback } />
   

Ver los resultados

Guarde todos los archivos. El explorador debe actualizarse automáticamente con la pantalla actualizada.