React: Entendendo Props e State

Olá, senhoras(es), como estamos? Hoje vou abordar aqui um tema importante, que é entender o que é prop e o que é state. Pra quem está iniciando, pode haver dificuldade de entender o comportamento desses caras, então vou tentar explicar aqui de forma simples e objetiva como podemos lidar com essas duas peças. Vamos lá!

Props:

Eu poderia simplesmente dizer que prop é o valor herdado, são variáveis passadas ou recebidas, vale lembrar, que sempre acontece pelo componente pai. Vejamos um exemplo:

Vejamos que criei um componente, dentro dos params da minha função, passei uma prop chamada ‘greetings’, e chamei ela dentro do meu return. Como eu disse anteriormente, essa passagem sempre acontece pelo componente pai, nunca pelo filho, repita esse mantra comigo: Props são passadas dos pais para os filhos, decorou? Sigamos.

Tá. Mas onde vou utilizar essa prop que criei?

Se nesse ponto do post você tem dúvida de como utilizar, eu recomendo fortemente a leitura desse guide aqui.

Vamos importar nosso componente AwesomeComponent em algum local e vamos dar um eyes no que vai rolar lá, bora!

Esse componente Awesome espera pela prop greetings, o que fizemos foi simplesmente chamar ela no nosso componente e tacar qualquer valor que quisermos, greetings é uma string. Salvando isso teremos o resultado esperado:

Sacaram? Você pode fazer mais testes, chumba mais alguma prop no nosso AwesomeComponent e repita esses passos que fizemos.

State:

State são valores dinâmicos, podemos alterar o valor do state dentro dela mesmo. Vamos acompanhar um exemplo aqui:

Nós criamos um state com nossos setters e getters, ou seja: increment e setIncrement. O nosso state começou com um valor predefinido, no caso 0. Fizemos uma funçãozinha simples que conta quantas vezes o botão foi clicado, passamos essas informações do estado pra dentro do nosso return, simples assim.

E se eu quiser passar a informação do state como prop, eu posso?

Simm! Você pode! Vamos acompanhar um exemplo de como fazer isso.

Vamos entender o que rolou aqui.

Na primeira tela do print (AwesomeComponent.js):

• Como já estamos sabidos, criamos nosso estado com profileState e setProfileState, mas se repararmos bem, o value que passamos para o state é ‘props’, props está sendo usado como argumento da nossa função AwesomeComponent, se pararmos pra pensar com calma, vamos lembrar que quando aprendemos sobre props, passamos valores pra dentro da nossa função, aqui estamos repetindo o mesmo processo, no caso, é somente props. O nosso state tem como value a prop que é o argumento da nossa função.
• Dentro do nosso return temos o seguinte o caso: Esperamos renderizar um name e um email, utilizando o state profileState passamos pra dentro do return essas expectativas. Mas temos que observar algo aqui, vamos com calma.

Na linha 13 e 17, estamos dizendo o seguinte: Cara, eu espero que seja renderizado um name e um email, estamos passando essa prop com essa expectativa, nada diferente de. Taí um bom ponto pra observamos, a mágica vai acontecer onde nosso AwesomeComponent é importado. Observem bem onde o componente é importado:

Onde o AwesomeComponent é importado estamos dando um spread no nosso state que foi criado, esse state recebe dois valores: name e email, que são exatamente os valores que nosso componente tem expectativa de receber.

Uma vez que existe match entre o que se envia e entre o que recebe, teremos como resultado a renderização, vejamos:

that’s it, aplicar para aprender =)

Abçs!