Artigo original: How to update a component’s prop in ReactJS — oh yes, it’s possible
Escrito por: Dheeraj DeeKay
Se você leu a documentação oficial do React (e você deveria, já que é um recurso incrível disponibilizado pela equipe do React), você deve ter notado essas linhas:
Independente se você declarar um componente como uma função ou uma classe, ele nunca deve modificar suas próprias props.
React é bastante flexível mas tem uma única regra estrita:
Todos os componentes React tem que agir como funções puras em relação às suas props.
Props nunca devem ser atualizadas. Nós devemos usá-las como são recebidas. Parece rígido, certo? O React, porém, tem seus motivos para ter essa regra e eu estou bastante convencido pelo raciocínio por trás disso. A única exceção entretanto, é que existem situações em que podemos precisar iniciar a atualização de uma prop. Em breve, saberemos como fazer isso.
Considere a seguinte linha de código de um componente pai:
<MyChild childName={this.state.parentName} />
Essa é uma linha simples com a qual toda pessoa desenvolvedora em React está familiarizada. Você está chamando seu componente filho. Enquanto faz isso, você também está passando o estado do componente pai (parentName) para o filho. No componente filho, esse estado será acessado como this.props.childName. É isso.
Agora, se houver a necessidade de qualquer alteração de nome, parentName será alterado no componente pai e essa alteração automaticamente será comunicada ao filho, como é comum no comportamento do React. Essa configuração vai funcionar na maior parte dos cenários.
Entretanto, o que ocorre se você precisar atualizar a prop de um componente filho, mas a informação da alteração necessária e o disparador para realizá-la só é conhecido por esse componente filho? Considerando os caminhos do React, os dados apenas podem transitar de cima para baixo, do pai para o filho. Assim, como podemos comunicar ao componente pai que a prop precisa ser alterada?
Bem, embora isso seja contrário ao padrão e não recomendado, as pessoas que desenvolveram a linguagem pensaram nisso. Surpresa!
Podemos fazer isso usando callbacks. Eu sei, sem surpresas até aqui! Elas parecem ser úteis para todos os problemas que tivemos até agora. Está certo, mas como?
Imagine se a chamada do componente filho acima fosse modificada da seguinte maneira:
<MyChild childName={this.state.parentName} onNameChange={this.onChange}/>
Agora, além de uma prop childName, nosso componente filho também possui um evento exposto chamado onNameChange. Essa é a forma de resolver o problema. Nosso componente filho fez sua parte. Agora, o componente pai deve fazer o que for necessário. Isso não é motivo de preocupação. Tudo que ele precisa fazer é definir uma função onChange, da seguinte forma:
function onChange(newName) {this.setState({parentName:newName });}É isso. Agora, sempre que quisermos atualizar a prop parentName no componente filho, tudo que precisamos fazer é chamar this.props.onNameChange('My new name') e pronto! Você terá o que deseja. Tudo resolvido. Espero que tenha sido fácil de entender.
Uma última coisa.
O React argumenta contra esse método e eles estão certos sobre isso, afinal, vai contra o padrão. Então, sempre que você encontrar uma situação como essa, verifique se é possível subir seu state ou se há uma maneira de dividir seu componente em partes. Isso pode parecer um pouco tedioso, mas saiba que é o modo ideal de se utilizar o React!
Boa programação para você!