JavaScript⏱ ~2 min de leitura

Props

Passando dados entre componentes

Props (properties) são a forma como componentes pai passam dados para componentes filho em React. Elas fluem em uma única direção: de cima para baixo (unidirecional). Isso torna o fluxo de dados previsível e facilita o rastreamento de bugs — você sempre sabe de onde vem um dado.

Props são somente-leitura (imutáveis) dentro do componente filho. Se o filho precisa mudar algo, ele chama uma função passada como prop pelo pai — que então atualiza o estado e re-renderiza. Esse padrão chama-se "lifting state up" (elevar o estado).

Qualquer valor JavaScript pode ser passado como prop: string, number, boolean, object, array, função, JSX. Props booleanas podem ser passadas sem valor: <Botao disabled /> é equivalente a <Botao disabled={true} />. Use defaultProps ou parâmetros padrão no destructuring para valores padrão.

Exemplo.java

// ── Definindo e consumindo props ─────────────────
function Botao({ texto, cor = "green", onClick, disabled = false }) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{ backgroundColor: cor }}
      className="btn"
    >
      {texto}
    </button>
  );
}

// ── Passando props ────────────────────────────────
function App() {
  const handleClick = () => alert("Clicou!");

  return (
    <div>
      <Botao texto="Salvar" onClick={handleClick} />
      <Botao texto="Cancelar" cor="red" onClick={() => history.back()} />
      <Botao texto="Desabilitado" disabled />  {/* boolean shorthand */}
    </div>
  );
}

// ── Lifting state up: filho comunica ao pai ────────
function Input({ valor, onChange }) {
  return <input value={valor} onChange={e => onChange(e.target.value)} />;
}

function Formulario() {
  const [email, setEmail] = useState("");

  return (
    <div>
      <Input valor={email} onChange={setEmail} /> {/* pai controla o estado */}
      <p>Email: {email}</p>
    </div>
  );
}

// ── children: conteúdo entre as tags ─────────────
function Card({ titulo, children }) {
  return (
    <div className="card">
      <h2>{titulo}</h2>
      <div className="corpo">{children}</div>
    </div>
  );
}

// <Card titulo="Info"><p>Qualquer JSX aqui</p></Card>

💡 Dica pro

"Props down, events up" — o dado desce via props, e as ações sobem via funções passadas como props. Esse padrão mantém o estado centralizado no componente pai e a UI como um reflexo do estado.

Recompensa+30 XP+exercícios