Neste artigo você aprenderá a passar dados do componente filho para o pai, uma ação muito comum para aplicativos React JS!
Fala programador(a), beleza? Bora aprender mais sobre React JS!
No desenvolvimento com React JS, uma das principais tarefas é gerenciar o estado e passar dados entre os componentes.
Enquanto passar dados do componente pai para o filho é relativamente simples através de props, o inverso pode não ser tão intuitivo.
Este artigo guiará você através do processo de passar dados do componente filho para o pai no React.
Entendendo o Conceito de “Levantamento de Estado”
“Levantamento de Estado” é um termo usado no React para descrever o processo de mover o gerenciamento do estado de um componente filho para um componente pai.
Isso permite que o componente pai passe o estado como props para o componente filho e também fornece uma função que o componente filho pode usar para atualizar esse estado.
Essencialmente, estamos “levantando” o estado do filho para o pai.
Exemplo de Componente React
Para ilustrar como o levantamento de estado funciona, vamos usar um exemplo simples de um componente pai que renderiza um componente filho.
O componente filho será um simples campo de entrada de texto, e queremos que o componente pai tenha acesso ao valor deste campo de entrada.
Primeiro, vamos criar nosso componente filho:
const InputFilho = ({ value, onChange }) => {
return <input type="text" value={value} onChange={onChange} />;
};
Este componente filho é uma função pura, aceitando value e onChange como props e usando-as para configurar o valor e o manipulador de evento onChange de seu campo de entrada.
Agora, vamos olhar para o componente pai:
import React, { useState } from "react";
import InputFilho from "./InputFilho";
const Pai = () => {
const [texto, setTexto] = useState("");
const handleInputChange = (event) => {
setTexto(event.target.value);
};
return (
<div>
<h1>Texto: {texto}</h1>
<InputFilho value={texto} onChange={handleInputChange} />
</div>
);
};
export default Pai;
O componente pai Pai usa o hook useState para gerenciar o estado texto.
A função handleInputChange é usada para atualizar este estado sempre que o valor do campo de entrada no componente filho InputFilho é alterado.
Este estado e a função de atualização são então passados para o componente filho como props.
Por Que Levantar o Estado?
Há várias razões para levantar o estado do componente filho para o componente pai.
A mais comum é que você tem vários componentes filhos que precisam compartilhar e manipular os mesmos dados.
Ao levantar o estado para o componente pai comum, você pode facilmente passar esses dados como props para os componentes filhos, permitindo-lhes tanto ler quanto atualizar esses dados.
Além disso, o levantamento de estado também pode simplificar a lógica do seu componente, tornando-o mais fácil de testar e manter.
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
O levantamento de estado é uma técnica fundamental no React que permite que os componentes filhos e pais compartilhem e manipulem o mesmo estado.
Este artigo demonstrou como você pode implementar esta técnica para passar dados do componente filho para o pai.
Lembre-se de que embora este exemplo seja simples, o conceito de levantamento de estado é muito poderoso e é usado frequentemente em aplicações React mais complexas.
Esperamos que este guia seja útil em seus futuros projetos com React!
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.