Neste artigo você aprenderá a passar dados do componente filho para o pai, uma ação muito comum para aplicativos React JS!

passar dados do componente filho para o pai capa

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.

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários