Props

No React, componentes podem ser customizados de diversas formas. Uma delas são as Props. O termo vem de propriedades e são pequenas configurações que passamos para um componente para alterar seu comportamento. Se componentes são funções, Props são como os parâmetros dessas funções.

Como utilizar Props?

Props são declaradas como parâmetros para as funções que criam os componentes. Simples e fáceis de executar!

1

Daqui, podemos tirar algumas observações a respeito da sintaxe:

• Props são passadas para o componente como um objeto, com chaves e valores. Por isso utilizamos { } ao redor da Prop name.
• Você passa a Prop como passaria um atributo do HTML normal ao componente.
• Para adicionar uma Prop para o HTML, também é necessário colocar entre { }.

Aqui vai mais um exemplo de como podemos usar Props para alterar o funcionamento de um componente!

1

Tipos nas Props

Como estamos utilizando Typescript, podemos utilizar tipos nas Props! Isso permite que quem use seu componente futuramente saiba quais atributos são obrigatórios e os tipos desses atributos. Num geral, é sempre uma boa ideia adicionar tipos as suas Props. Há várias maneiras de fazer isso, a mostrada abaixo é apenas uma delas.

1

Propriedade Children

Dentro do HTML, somos logo de cara ensinados que um elemento <div></div> pode ter vários elementos dentro dele. Componentes não são diferentes, e quando queremos passar elementos ou texto para dentro de um componente, podemos fazer isso através da propriedade especial Children!

1

Agora, você está pronto para aprender sobre hooks!