React - O que são Props

Usamos props no React para passar dados de um componente para outro (de um componente pai para um componente filho). Props é apenas uma maneira mais curta de dizer propriedades. Eles são úteis quando você deseja que o fluxo de dados em seu aplicativo seja dinâmico.

Exemplo de um componente App.

function App() {
  return (
    <div className="App">

    </div>
  )
}

Agora vamos criar outro componente para exemplificar com e sem o uso de Props.

// Componente sem o uso de props - ( dados estáticos )
const SayHello = () => {
  return (
    <div>
      <p>Olá Jorge</p>
    </div>
  )
}

// Utilizando Props para torna o componente reutilizável e dinâmico
const SayHelloWithProps = (props) => {
  return (
    <div>
      <p>Olá {props.name}</p>
    </div>
  )
}

// Adicionando o SayHelloWithProps ao App
const App = () => {
  const name = 'Jorge';

  return (
    <div className="App">
      <SayHelloWithProps name={name}/>
    </div>
  )
}

Ao reutilizar o componente SayHelloWithProps esse recebe um atributo 'name' que é inserido de forma dinâmica ao componente, o acesso é dado via argumento da função que possui acesso a um objeto props.

const SayHelloWithProps = (props) => {

  const name = { props }

  return (
    <div>
      <p>Olá {name} {props.lastName}</p>
    </div>
  )
}

Props são somente leitura, não possível atribuir um novo valor, fazendo isso um erro é gerado.

Você pode usar a desestruturação ( no argumento da função ou no corpo da função ) isso torna o código mais limpo e fácil de entender ou acessar as propriedade com a dot notation.

É possível passar além de dados, funções via props e se necessário definir valores padrões para os mesmo.

Exemplo:

...
const SayHelloWithProps = ({ name = 'Desconhecido'}) => {
  return (
    <div>
      <p>Olá {name}</p>
    </div>
  )
}

As Props são o equivalente a argumentos de funções, aceitando variados tipos de dados e funções, use sua criatividade para criar aplicações e usar essa funcionalidade de uma forma que deixe seus componentes mais reutilizaveis.

Baseado no post - How to Use Props in React

Documentação Oficial - Componentes e Props

Veja também: Aprendendo React - The Roadmap! | React - O que é JSX | React - O que são Componentes | React - O que são Estados

Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

Linkedin | Github