Props in ReactJS – Criando componente de formulário

No ReactJS, props são utilizados para passar dados de um componente pai para um componente filho. Isso é útil quando queremos reutilizar um componente em diferentes partes de nossa aplicação, mas com dados diferentes.

Vamos criar um componente de formulário simples que utiliza props para definir os campos do formulário.

Código do componente de formulário:

import React from 'react';

function FormComponent(props) {
  return (
    <form>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" name="name" value={props.name} onChange={(e) => props.setName(e.target.value)} />
      
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" value={props.email} onChange={(e) => props.setEmail(e.target.value)} />
    </form>
  );
}

export default FormComponent;

Neste exemplo, o componente de formulário recebe as props `name`, `email`, `setName` e `setEmail`. Estas props são passadas do componente pai para o componente de formulário.

Utilizando o componente de formulário:

import React, { useState } from 'react';
import FormComponent from './FormComponent';

function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <div>
      <h1>Formulário</h1>
      <FormComponent name={name} email={email} setName={setName} setEmail={setEmail} />
    </div>
  );
}

export default App;

No componente pai (`App`), definimos os estados `name` e `email` utilizando o `useState` do React. Estes estados são passados como props para o componente de formulário, juntamente com as funções `setName` e `setEmail` para atualizar os estados.

Com isso, podemos reutilizar o componente de formulário em diferentes partes de nossa aplicação, passando dados diferentes através de props.