Uma dúvida simples sobre esse curso.
Nesse exemplo, de uma função "receber ela mesma". O que está acontecendo no código? O que isso quer dizer?
<Cronometro
finalizarTarefa={finalizarTarefa}
/>
Uma dúvida simples sobre esse curso.
Nesse exemplo, de uma função "receber ela mesma". O que está acontecendo no código? O que isso quer dizer?
<Cronometro
finalizarTarefa={finalizarTarefa}
/>
Aqui tem duas coisas diferentes acontecendo:
finalizarTarefa
(Neste tópico estou falando da finalizarTarefa
que fica fora da chaves e antes do sinal de igual.)
Este item é uma prop
, que, no final das contas, nada mais é do que uma propriedade de um objeto JS. Props
podem receber qualquer coisa como valor, incluindo uma função.
Lá dentro do componente Cronometro, ela vai ser usada como propriedade de um objeto.
A função do componente, deve estar mais ou menos assim:
const Cronometro = ({ finalizarTarefa }: Props) => {
// Código do componente
}
Como vemos acima, na função do componente, temos um destructuring
de objeto do tipo Props
.
Que também pode ser escrita e usada assim:
const Cronometro = (props: Props) => {
// Código do componente
props.finalizarTarefa();
}
finalizarTarefa
Uma das coisas a respeito do React é que só ele só permite que você passe algum tipo de dado ou objeto do componente pai para o componente filho. Porém, em alguns casos, precisará passar do componente filho para o pai.
A forma que React nos permite de fazer isso é através de funções. Então, neste caso, a gente passa uma função como props
para pode executar algo no componente pai.
Só não dá conflito de nomes, porque um é objeto e outro é função. Já que aqui você está passando, como argumento, uma função, dentro de uma valor de um objeto.