Aula 5

Passagem de Dados no React

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.

1. 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.

Iteração sobre arrays

O método map é usado para iterar e renderizar dinamicamente listas de itens no React.

import React from 'react';

const ItemList = () => {
  const items = ['React', 'Vue', 'Angular'];

  return (
     <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
     </ul>
  );
}

export default ItemList;