props dentro do NavLink

Fala ai Gabriel, tudo bem? Vamos lá:

Olá, gostaria de entender como funciona a o spred operator dentro do props no navlink.

Imagine que temos um componente chamado Button que recebe como propriedades disabled, size e text.

Repare que são três propriedades, agora, vamos pensar que o componente Form está chamando o Button e por fim, o App está chamando o Form.

Então vamos precisar enviar as propriedades para o Form que por sua vez vai enviar para o Button.

const Form = props => <Button disabled={props.disabled} size={props.size} text={props.text}/>

Teríamos algo mais ou menos assim. Claro que podemos utilizar o destructuring e reduzir um pouco os códigos:

const Form = ({ disabled, size, text }) => <Button disabled={disabled} size={size} text={text}/>

Mas, ainda estamos recebendo somente essas propriedades e repassando para o Button, tornando o código verboso.

Sendo assim, sabendo que nossas propriedades é um objeto com chave e valor:

{
    disabled: true,
    size: 'small',
    text: 'Save',
}

Podemos utilizar o spread:

const Form = props => <Button {...props}/>

Isso vai fazer com que cada chave do objeto seja passada como propriedade para o componente Button e o valor de cada chave será o valor da propriedade.

Espero ter ajudado.

Ahh entendi! Obrigado!

Magina Gabriel, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.