1
resposta

função={função}

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} />

1 resposta

Aqui tem duas coisas diferentes acontecendo:

Props 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();
}

Função 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.

Sendo assim...

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.

Para conhecer e saber mais:

  1. Documentação React - Props

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software