import React, { useRef, useState } from "react";

import PropTypes from "prop-types";

const App = () => {
  let firstRef = useRef(null),
    middleRef = useRef(null),
    lastRef = useRef(null);

  const [name, setName] = useState({
    firstName: "",
    middleName: "",
    lastName: "",
  });

  const firstN = () => {
    setName({ ...name, firstName: firstRef.current.value });
  };

  const middleN = () => {
    setName({ ...name, middleName: middleRef.current.value });
  };

  const thirdN = () => {
    setName({ ...name, lastName: lastRef.current.value });
  };

  return (
    <React.Fragment>
      <Name first={name.firstName} middle={name.middleName} last={name.lastName} />
      <Name first={name.firstName} middle={name.middleName} last={name.lastName} />
      <input type="text" ref={firstRef} onChange={firstN} />
      <input type="text" ref={middleRef} onChange={middleN} />
      <input type="text" ref={lastRef} onChange={thirdN} />
    </React.Fragment>
  );
};

export default App;

export const Name = ({ first, middle, last }) => {
  return (
    <>
      <h2>
        My name is {first} {middle} {last}
      </h2>
    </>
  );
};

Name.propTypes = {
  first: PropTypes.string,
  middle: PropTypes.string,
  last: PropTypes.string,
};