Integração de Props e State para uma comunicação eficaz entre diferentes componentes

 

No React, Props e State são essenciais para a comunicação entre componentes. Props permitem passar dados de um componente pai para um componente filho.

State gerencia dados internos de um componente. Vamos ver como esses dois conceitos funcionam juntos.

Props: Passando Dados de Pai para Filho

Props são argumentos passados para componentes React. Eles são imutáveis, ou seja, não podem ser alterados pelo componente que os recebe. Veja um exemplo simples:

// Componente Pai
function Pai() {
  const mensagem = "Olá do Pai!";

  return <Filho texto={mensagem} />;
}

// Componente Filho
function Filho(props) {
  return <div>{props.texto}</div>;
}

Neste exemplo, Pai passa a prop mensagem para o componente Filho. O componente Filho recebe essa prop e a exibe.

State: Gerenciando Dados Internos

State é usado para armazenar dados que podem mudar. Ele é gerenciado dentro do componente onde foi declarado. Veja um exemplo básico:

import { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
}

Aqui, Contador usa useState para criar um estado contador e uma função setContador para atualizá-lo. O valor é exibido e pode ser incrementado ao clicar no botão.

Integração de Props e State

Agora, vamos ver como integrar Props e State para uma comunicação eficaz entre componentes.

1. Atualizando State a partir de Props: Um componente filho pode informar mudanças ao componente pai, que atualiza seu state e repassa como prop ao filho. Veja:

// Componente Pai
import { useState } from 'react';

function Pai() {
  const [mensagem, setMensagem] = useState("Mensagem Inicial");

  const atualizarMensagem = (novaMensagem) => {
    setMensagem(novaMensagem);
  };

  return <Filho texto={mensagem} atualizarTexto={atualizarMensagem} />;
}

// Componente Filho
function Filho(props) {
  const novaMensagem = "Mensagem Atualizada do Filho";

  return (
    <div>
      <p>{props.texto}</p>
      <button onClick={() => props.atualizarTexto(novaMensagem)}>
        Atualizar Mensagem
      </button>
    </div>
  );
}

Neste exemplo, Pai passa uma prop texto e uma função atualizarTexto para Filho. O filho exibe texto e usa atualizarTexto para informar ao pai quando a mensagem deve ser atualizada.

O pai então atualiza seu state e repassa a nova mensagem ao filho.

Conclusão

A integração de Props e State permite que componentes React se comuniquem de forma eficiente. Props são usados para passar dados e funções entre componentes.

State gerencia os dados internos que podem ser atualizados dinamicamente. Essa combinação é poderosa para criar interfaces dinâmicas e interativas.