Aula 3

Props (abreviação de "properties") são uma forma de passar dados de um componente pai para um componente filho em React.

              
import React from 'react';

const Saudacao = (props) => {
  return (
    <div>
      <h1>Olá, {props.nome}!</h1>
    </div>
  );
};

export default Saudacao;
              
            

A comunicação entre componentes no React é fundamental para construir aplicações dinâmicas. Aqui veremos como passar dados de um componente pai para um filho e vice-versa.

Passando Dados do Pai para o Filho

A passagem de dados do pai para o filho é realizada por meio de props (propriedades). Veja o exemplo abaixo:

import React from 'react';

const Child = ({ message }) => {
  return <p>{message}</p>;
}

const Parent = () => {
  return <Child message="Olá, do componente Pai!" />;
}

export default Parent;

        

Vantagens

• Simples e direto para componentes hierárquicos.
• Propriedades podem ser usadas como valores estáticos ou dinâmicos.

Desvantagens

• Torna-se complexo em hierarquias profundas (pode ser resolvido com Context API ou bibliotecas de gerenciamento de estado).

2. Passando Dados do Filho para o Pai

Para enviar dados do filho para o pai, o pai deve passar uma função como prop para o filho. O filho pode chamar essa função com os dados desejados.

import React, { useState } from 'react';

Child = ({ sendDataToParent }) => {
  return (
    <button onClick={() => sendDataToParent('Dados do Filho')}>Enviar</button>
  );
}

Parent = () => {
  const [data, setData] = useState('');

  const handleDataFromChild = (childData) => {
    setData(childData);
  };

  return (
    <div>
      <p>Dados recebidos: {data}</p>
      <Child sendDataToParent={handleDataFromChild} />;
    </div>
  );
}

export default Parent;

        

Vantagens

• Permite que o pai reaja a eventos do filho.
• Flexível para construir interações dinâmicas.

Desvantagens

• Requer mais configuração do que a passagem pai para filho.