Fiquei com uma dúvida em relação a criação do array do time! Porque o array foi criado no index do formulário e não no lista suspensa?
Att; Obrigado!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Fiquei com uma dúvida em relação a criação do array do time! Porque o array foi criado no index do formulário e não no lista suspensa?
Att; Obrigado!
Olá Everton!
A criação do array no index do formulário e não na lista suspensa ocorre porque o array é a fonte de dados para a lista suspensa. O array é criado no index do formulário para que possamos passá-lo como uma propriedade para o componente da lista suspensa. Dessa forma, podemos iterar sobre o array e renderizar as opções da lista suspensa com base nos itens do array.
No exemplo que você mencionou, o array é criado no index do formulário e passado como uma propriedade para o componente da lista suspensa. Dentro do componente da lista suspensa, utilizamos o método map para iterar sobre o array e renderizar as opções da lista suspensa.
Aqui está um exemplo simplificado para ilustrar esse processo:
// No index do formulário
const times = ['Time 1', 'Time 2', 'Time 3'];
// No componente da lista suspensa
const ListaSuspensa = (props) => {
return (
<div>
<label>{props.label}</label>
<select>
{props.itens.map(item => <option key={item}>{item}</option>)}
</select>
</div>
)
}
// No componente do formulário
<ListaSuspensa itens={times} />
Nesse exemplo, o array times é criado no index do formulário e passado como uma propriedade para o componente da lista suspensa. Dentro do componente da lista suspensa, utilizamos o método map para iterar sobre o array times e renderizar as opções da lista suspensa.
Isso tem a ver com o que chamamos de elevação de estado no React. Isso nada mais é do que definir os estados no nível mais alto da árvore de componentes para que esses estados possam ser usados por componentes filhos. Neste caso, o componente mais alto na árvore é o Formulário, e como a ListaSuspensa é um componente filho de Formulário passamos via props, ou seja, passamos a propriedade times para ela. Se dentro de formulário tiver outro componente que também precisa conhecer os times, ele também vai receber esse estado via props. Isso facilita o compartilhamento dos estados.
Agora, se você perceber que os times são usados apenas por ListaSuspensa e não por outros componentes dentro do Formulário, aí faz sentido você definir os times lá. Mas nesse caso, acredito que foi usado um recurso didático para explicar o que são as props e como usá-las no React.
Espero ter ajudado e bons estudos!
Entendi, muito obrigado pela explicação!