function ProfileDetails(props) {
  const dispatch = useDispatch();
  const name = useSelector(selectName);
  const [nameField, setNameField] = useState(true);

  return (
    <div>
      <h2>Profile</h2>

      <label htmlFor="name">Name: </label>

      <input
        id="name" value={name} disabled={nameField}
        onChange={(e) => dispatch(setName(e.target.value))}
      />

      <button onClick={() => setNameField(!nameField)}>
        {nameField ? "Change" : "Save"}
      </button>

      <p>Posts: </p>
    </div>
  );
}