Usar tipos de dados complexos como props

Concluído

O componente props não é limitado a cadeias de caracteres, mas pode usar objetos JavaScript. Você pode usar isso para criar componentes mais robustos.

Cenário

Você deseja atualizar RecipeTitle para exibir os comentários da receita. Se a classificação média for igual ou inferior a 3,5, você exibirá a classificação como vermelho. Se for maior que 3,5, você exibirá a classificação como verde. Use o operador ternário e as classes CSS para ajudar a gerenciar a exibição.

Criar o CSS

Ao importar o CSS para um componente individual, você pode evitar conflitos de nomes e outros problemas que geralmente surgem com o CSS. Aqui, comece criando um arquivo .css para RecipeTitle.

1. Adicione um novo arquivo à pasta src chamada RecipeTitle.css

2. Adicione o seguinte CSS a src/RecipeTitle.css:

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

Atualizar RecipeTitle

Agora, atualize RecipeTitle para importar o CSS e exibir os valores.

1. Abra src/RecipeTitle.jsx

2. Na parte superior do arquivo, adicione as seguintes linhas de código:

   import './RecipeTitle.css';
   

3. Abaixo da linha <h2>{ props.title }</h2>, adicione o seguinte código:

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

Explore o código

Você começou importando o arquivo CSS criado. Adicionou um novo elemento h3 para exibir o feedback. Usou o operador ternário para definir a classe com base em rating.

Todo o conteúdo de ReactTitle.jsx agora deve 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;

Atualizar componente App para passar classificações

Atualize RecipeTitle para definir o atributo feedback.

1. Abra src/App.jsx.

2. Modifique o elemento RecipeTitle existente para adicionar o atributo feedback:

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

Confira os resultados

Salve todos os arquivos. O navegador deve ser atualizado automaticamente com a exibição atualizada.