Artigo original: https://www.freecodecamp.org/news/react-changing-state-of-child-component-from-parent-8ab547436271/
Escrito por: Johny Thomas
Nota da tradução: a aplicação abaixo foi criada usando a versão 17 do React. A partir da versão 18, a maneira de renderizar o root foi alterada. Faça seus testes no sandbox, que usa a versão 17.
Vamos criar uma aplicação em React simples que mostre o nome verdadeiro de um super-herói ao clicar um botão.
Primeiro, criaremos um componente Superhero, com um atributo name no state. Esse componente renderizará aquele name inicialmente.
Depois, vamos criar uma função changeName() no componente Superhero. Essa função mudará o nome no state para o nome real do super-herói.
Agora, temos o componente Superhero, que mostra o nome do super-herói e uma função que atualiza o nome para o nome real.
O componente Superhero completo tem esta aparência:
Vamos, então, criar o componente App, que renderizará o componente Superhero e um botão. Ao clicar no botão, o nome verdadeiro do super-herói deve ser exibido.
Adicionamos uma função handleClick(), que será chamada quando o usuário clicar em um botão. Precisaremos descobrir um modo de atualizar o state do componente filho, o componente Superhero.
Criamos uma função changeName() no componente Superhero. Essa função mostrará o nome verdadeiro do super-herói. Se pudermos chamar essa função a partr do componente App (o componente pai), nosso trabalho está concluído. Precisamos, então, chamar a função.
É aqui que as refs (referências) são úteis.
Vamos criar uma referência do componente Superhero no componente App. Aqui temos o código para fazer isso.
Criamos uma referência usando o método React.createRef() e a associamos ao componente Superhero usando o atributo ref.
Agora, conseguiremos fazer uma referência ao nó Superhero usando this.superheroElement.current. Também poderemos chamar a função changeName() no componente Superhero usando this.superheroElement.current.changeName().
Vamos atualizar nossa função handleClick() no componente App para que chame a função changeName().
A função handleClick() terá, agora, esta aparência:
Confira o código completo no sandbox abaixo.
Aprendemos neste artigo como atualizar o state de um componente filho a partir de um componente pai. Espero que o artigo tenha sido útil para você.