Props

Os componentes React utilizam props para comunicarem entre si. Cada componente pai pode passar algumas informações aos seus componentes filhos, fornecendo-lhes props. Os props lembram os atributos de HTML, mas pode-se passar qualquer valor JavaScript através deles, incluindo objetos, arrays e funções.

É preciso notar que os props apenas transportam dados num fluxo unidirecional (apenas de componentes pai para filho). Não é possível com props passar dados de filho para pai ou para componentes do mesmo nível.

Definir props em componentes funcionais

function Pessoa(props){
   return (
         <h1>Ola, {props.nome}</h1>
         <h2>{props.morada}</h2>
   );
}

function Perfil(){
   return (
      <ul>
      <li><Pessoa nome="Ricardo" morada="Lisboa" /></li>
      <li><Pessoa nome="Joana" morada="Oeiras" /></li>
      <li><Pessoa nome="Maria" morada="Setubal" /></li>
      </ul>
   );
}

No exemplo acima, temos o componente Perfil (pai) e o componente Pessoa (filho). No componente pai (Perfil) criamos 3 instancias do componente filho (Pessoa) cada um com as propriedades nome e morada. O componente filho (Pessoa), recebe os valores dessas propriedades através do objeto props.

Definir props com desestruturação do objeto props

Quando um componente filho recebe as propriedades no objeto pai no objeto props, podemos desestruturar essas propriedades do objeto props:

function Pessoa({nome, morada}){
   return (
         <div>
         <h1>Ola, {nome}</h1>
         <h2>{morada}</h2>
         </div>
   );
}

Definir props em componentes de classe

class Pessoa extends React.Component{
   render() {
      (
         <div>
         <span>Ola, {this.props.nome}</span>
         <span>{this.props.morada}</span>
         </div>
      );
   }
}

class Perfil extends React.Component{
   render(){ 
      (
      <ul>
      <li><Pessoa nome="Ricardo" morada="Lisboa" /></li>
      <li><Pessoa nome="Joana" morada="Oeiras" /></li>
      <li><Pessoa nome="Maria" morada="Setubal" /></li>
      </ul>
      );
   }
}

Nos componentes de classe temos acesso aos props através de this.props.

Passar um objeto como props

Podemos usar o operador spread(…) para passar um objeto como props para um componente React.

O operador spread irá descompactar todas as propriedades do objeto e passá-las como props para o componente especificado.

function Pessoa({nome, idade, morada}) {
  return (
    <div>
      <h2>{nome}</h2>
      <h2>{idade}</h2>
      <h2>{morada}</h2>
    </div>
  );
}

export default function App() {
  const pessoa = {nome: 'Alice', idade: 29, morada: 'Lisboa'};

  return (
    <div>
      <Pessoa {...pessoa} />
    </div>
  );
}

Passar um array como props

Para passar um array como props para um componente no React, colocamos o array entre chavetas, por exemplo. .

O componente filho pode executar lógica personalizada no array ou utilizar o método map() para renderizar os elementos do array.

function Books({arr}) {
  console.log(arr); // 👉️ ['A', 'B', 'C', 'D']
  return (
    <div>
      {arr.map(title => {
        return <div key={title}>{title}</div>;
      })}
    </div>
  );
}

export default function App() {
  const arr = ['A', 'B', 'C', 'D'];

  return (
    <div>
      <Books arr={arr} />
    </div>
  );
}