Como passar props para o componente pai no React JS

Neste artigo você aprenderá a como passar props para o componente pai no React, uma ação muito comum em sistemas mais complexos

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Em aplicações React, a comunicação entre componentes é um tópico vital.

Enquanto é comum passar informações de um componente pai para um componente filho através de props, muitos desenvolvedores se deparam com o desafio inverso: como passar informações de um componente filho para seu componente pai.

Este artigo aborda essa questão e mostra como realizar essa comunicação de forma otimizada.

Fundamentos do Fluxo de Dados no React

Antes de adentrarmos na solução, é crucial entender o conceito fundamental de fluxo de dados no React.

Unidirecionalidade das props

O React segue um princípio de fluxo de dados unidirecional. Isso significa que as props (propriedades) fluem em uma única direção: do componente pai para o componente filho.

Esse design ajuda a manter o código mais previsível e fácil de rastrear, pois sabemos de onde os dados estão vindo e para onde estão indo.

Mas e quando queremos que o componente filho comunique algo de volta ao pai?

Utilizando Funções Callback

A abordagem mais comum para permitir que um componente filho comunique algo ao seu componente pai é através de funções callback. Vamos a um exemplo prático:

Exemplo: Componente de Input

Imagine que temos um componente pai que contém um componente filho responsável por receber uma entrada de texto.

Queremos que, sempre que o valor do input mude, o componente pai seja notificado e possa reagir a essa mudança.

ComponentePai.js

import React, { useState } from 'react';
import InputFilho from './InputFilho';

function ComponentePai() {
  const [texto, setTexto] = useState('');

  const handleInputChange = (novoTexto) => {
    setTexto(novoTexto);
  };

  return (
    <div>
      <InputFilho onInputChange={handleInputChange} />
      <p>Texto inserido: {texto}</p>
    </div>
  );
}

InputFilho.js

import React from 'react';

function InputFilho({ onInputChange }) {
  const handleChange = (event) => {
    onInputChange(event.target.value);
  };

  return <input type="text" onChange={handleChange} />;
}

Neste exemplo, o ComponentePai passa uma função callback (handleInputChange) para o InputFilho através da prop onInputChange.

Quando o valor do input muda no InputFilho, ele chama essa função callback, notificando o ComponentePai sobre a mudança.

Benefícios desta Abordagem

1. Mantém o Fluxo Unidirecional de Dados

Mesmo que pareça que estamos passando dados do filho para o pai, ainda estamos aderindo ao princípio do fluxo de dados unidirecional.

O componente filho não está realmente enviando dados de volta.

Em vez disso, ele apenas notifica o componente pai (através da função callback) que algo mudou, e é o componente pai que decide como lidar com essa mudança.

2. Reutilização de Componentes

Ao usar funções callback, o componente filho permanece “burro”, ou seja, ele não tem conhecimento sobre o que acontece quando os dados mudam.

Isso torna o componente filho altamente reutilizável, pois ele simplesmente notifica sobre a mudança, sem se preocupar com a lógica que acontece após a notificação.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

E chegamos ao fim do artigo sobre como passar props para o componente pai no React!

Em React, a comunicação entre componentes é fundamental para criar aplicações dinâmicas e interativas.

Embora o fluxo padrão de dados seja do componente pai para o filho através de props, é possível (e muitas vezes necessário) notificar o componente pai sobre mudanças que ocorrem no filho.

Através do uso de funções callback, podemos efetivamente e de forma otimizada estabelecer essa comunicação, garantindo que nossos componentes permaneçam modularizados e reutilizáveis.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.