Props

Props (propriedades) são uma forma de passar dados de um componente pai para um componente filho em React. As props são passadas para um componente como um objeto e são acessadas dentro do componente usando a notação de ponto. As props são usadas para tornar os componentes mais flexíveis e reutilizáveis, permitindo que os dados sejam passados de forma dinâmica para um componente.

Por exemplo, um componente que exibe um título e um parágrafo pode ser definido da seguinte forma:

  import React from 'react';

  function MeuComponente(props) {
    return (
      <div>
        <h1>{props.titulo}</h1>
        <p>{props.paragrafo}</p>
      </div>
    );
  }

Nesse exemplo, o componente recebe duas props: titulo e paragrafo. Essas props são passadas para o componente como um objeto, que é acessado dentro do componente usando a notação de ponto.

As props também podem ser usadas para passar funções de um componente pai para um componente filho, permitindo que o componente filho chame a função definida no componente pai. Isso é útil para tornar os componentes interativos e dinâmicos.

Por exemplo, um componente que exibe um botão pode ser definido da seguinte forma:

  import React from 'react';

  function MeuBotao(props) {
    return (
      <button onClick={props.onClick}>
        {props.texto}
      </button>
    );
  }

Nesse exemplo, o componente recebe duas props: onClick, que é uma função que será chamada quando o botão for clicado, e texto, que é o texto exibido no botão. O componente filho usa a prop onClick como o manipulador de eventos do botão e chama a função definida no componente pai quando o botão é clicado.

Em resumo, as props são usadas para passar dados e funções de um componente pai para um componente filho em React. As props tornam os componentes mais flexíveis e reutilizáveis, permitindo que os dados sejam passados de forma dinâmica para um componente.