Implementação de exemplos práticos para solidificar o entendimento de Props e State
Primeiramente, vamos revisar como passar dados entre componentes usando props. Imagine um componente de lista de tarefas que precisa exibir várias tarefas.
Cada tarefa pode ser um componente filho, recebendo seus dados do componente pai através de props. Veja um exemplo simplificado:
// Componente pai
function ListaDeTarefas() {
const tarefas = ["Estudar React", "Fazer compras", "Fazer exercícios"];
return (
<div>
{tarefas.map((tarefa, index) => (
<Tarefa key={index} texto={tarefa} />
))}
</div>
);
}
// Componente filho
function Tarefa({ texto }) {
return <div>{texto}</div>;
}Aqui, o componente pai ListaDeTarefas passa cada tarefa para o componente filho Tarefa através da prop texto.
Agora, vamos abordar como o state é utilizado na prática. Considere um formulário de cadastro onde o usuário preenche os campos e os dados são armazenados no state do componente.
Veja um exemplo básico:
// Componente de formulário
function FormularioCadastro() {
const [nome, setNome] = useState("");
const [email, setEmail] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
// Aqui você pode enviar os dados para o servidor ou realizar outras ações
console.log("Nome:", nome);
console.log("Email:", email);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={nome} onChange={(e) => setNome(e.target.value)} placeholder="Nome" />
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
<button type="submit">Enviar</button>
</form>
);
}Neste exemplo, o state é utilizado para armazenar os valores dos campos de entrada (nome e email). Sempre que o usuário digita algo, o state é atualizado e reflete o que foi digitado.
Com estes exemplos práticos, você solidificará seu entendimento sobre como utilizar Props e State em aplicações React de forma eficiente.
Experimente criar seus próprios exemplos e explore diferentes cenários para aprimorar ainda mais suas habilidades!
