Como passar dados e eventos entre componentes em React

Artigo original: How to Pass Data and Events Between Components in React

Se você está tentando implementar operações de CRUD usando endpoints de API, pode se dar conta de que é mais difícil do que você imagina gerenciar dados entre vários componentes.

Talvez você tenha um modal, mas queira acioná-lo a partir de um componente diferente.

Saber como lidar com esses cenários pode ser problemático.

Neste tutorial, mostrarei a você como fazer isso.

Como passar dados entre um componente pai e um componente filho

Primeiro, vamos passar os dados entre um componente pai e um componente filho.

Para começar, você precisa criar dois componentes, um pai e um filho.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Em seguida, importe o componente filho no componente pai e retorne-o.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Em seguida, crie uma função e um botão para disparar aquela função. Além disso, crie um estado usando o hook useState para gerenciar os dados.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("Estes são os dados que vão do componente pai para o componente filho.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Clique no pai</Button>
      </div>
    </div>
  )
}

Como você pode ver aqui, estamos chamando a função parentToChild no clique do botão Clique no pai. Quando o botão Clique no pai é clicado, Ele armazenará "Estes são os dados que vão do componente pai para o componente filho." na variável data.

Agora, vamos passar o estado desses dados nos nossos componentes filhos. Você pode fazer isso usando props.

Passe os dados como props quando estiver chamando o componente filho assim:

<Child parentToChild={data}/>

Aqui, estamos passando os dados no componente filho como data.

data são os dados que temos de passar. parentToChild é o nome do prop.

Em seguida, é hora de capturar os dados no componente filho. É muito simples.

Aqui, pode haver dois casos.

Caso 1: Se estiver usando um componente funcional, obtenha parentToChild nos parâmetros.

import React from 'react'

export default function Child({parentToChild}) {
    return (
        <div>
            {parentToChild}
        </div>
    )
}

Caso 2: Se estiver usando um componente de classe, use this.props.parentToChild.

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}

Seja como for, você terá os mesmos resultados:

Quando clicamos no botão Click Parent (Clique no pai), veremos os dados como resultado na tela.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("Estes são os dados que vão do componente pai para o componente filho.");
  }
  return (
    <div className="App">
      <Child parentToChild={data}/>
      
      <div className="child">
        <Button primary onClick={() => parentToChild()}>Clique no pai</Button>
      </div>
    </div>
  )
}

Acima, você vê o código completo para o Componente pai.

Como passar dados entre um componente filho e um componente pai

Isso já é um pouco mais complicado.

Primeiro, você precisa criar uma função no componente pai chamada childToParent e um estado vazio chamado data.

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

const childToParent = () => {
   
}

Em seguida, passe a função childToParent como prop para o componente filho.

<Child childToParent={childToParent}/>

Agora, em nosso componente filho, aceite essa chamada de função como props e atribua-a em um evento onClick.

Além disso, declare um estado que contenha alguns dados na forma de uma string ou um número.

Passe os dados na função parentToChild como parâmetros.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    const data = "Estes são os dados do componente filho para o componente pai."
    return (
        <div>
            <Button primary onClick={() => childToParent(data)}>Clique no filho</Button>
        </div>
    )
}

Em seguida, no componente pai, aceite esses dados na função childToParent como parâmetro. Depois, defina data usando o hook useState.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
      <div>
        <Child/>
      </div>
    </div>
  );
}

export default Parent;

Em seguida, mostre a variável data na função de retorno.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
     {data}
      <div>
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

Os dados do filho sobrescreverão os do pai quando o botão Clique no filho for clicado.

Agora, você pode passar dados de filho para pai e de pai para filho como um profissional.

Você também pode passar eventos, como onClick ou OnChange

Simplesmente chame um método alert na função childToParent e passe aquela função como uma prop para o componente filho.

import './App.css';
import Child from './Child';

function Parent() {
  const childToParent = () => {
    alert("Este é um alerta do componente filho")
  }

  return (
    <div className="App">
      <div className="child">
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

No componente filho, aceite a função childToParent como uma prop. Em seguida, atribua-a a um evento onClick em um botão.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    return (
        <div>
            <Button primary onClick={() => childToParent()}>Clique no filho</Button>
        </div>
    )
}

Sua função no componente pai será chamada quando você clicar no botão no componente filho e você verá o alerta:

É isso!

Você pode encontrar o código no Github se quiser experimentar um pouco mais.

Por hoje é só, pessoal. Bom aprendizado.