PersonalInformation.js

function PersonalInformation({
  firstName,
  middleName,
  lastName,
  setFirstName,
  setMiddleName,
  setLastName
}) {
  return (
    <div>
      <h1 style={{ textAlign: "center" }}>Please fill up the details</h1>

      <div style={{ margin: "0 auto", width: "350px" }}>
        <h3>First name:</h3>
        <input onChange={e => setFirstName(e.target.value)} />

        <h3>Middle name:</h3>
        <input onChange={e => setMiddleName(e.target.value)} />

        <h3>Last name:</h3>
        <input onChange={e => setLastName(e.target.value)} />
      </div>

      <h1 style={{ textAlign: "center" }}>Results</h1>
      <div style={{ margin: "0 auto", width: "350px" }}>
        <h3>First name: {firstName} </h3>
        <h3>Middle name: {middleName} </h3>
        <h3>Last name: {lastName} </h3>
      </div>
    </div>
  );
}