React functional component for handling inputs using hooks (Uses Bootstrap 4)

Inputs.jsx

import React, { useState } from "react";

export const Inputs = () => {
  const [person, setPerson] = useState({
    name: "",
    age: 0,
    job: ""
  });

  const handleChange = e => {
    e.persist();
    const { name, value } = e.target;
    setPerson(state => ({
      name: name === "name" ? value : state.name,
      age: name === "age" ? Number(value) : state.age,
      job: name === "job" ? value : state.job
    }));
  };
  
  return (
    <section className="mx-auto">
      <div className="card bg-dark text-white p-3 mb-3">
        <input
          type="text"
          className="form-control mb-1"
          onChange={handleChange}
          placeholder="name"
          name="name"
          autoComplete="off"
        />
        <input
          type="number"
          className="form-control mb-1"
          onChange={handleChange}
          placeholder="age"
          name="age"
          autoComplete="off"
        />
        <input
          type="text"
          className="form-control"
          onChange={handleChange}
          placeholder="job"
          name="job"
        />
        <div className="p-3">
          My name is {person.name}. I am a {person.age} year old {person.job}.
        </div>
      </div>
    </section>
  );
};