User's data form example

ChangeProfilePage.jsx

/**
 * This demonstrate example of UsersBioForm usage at dummy edit
 * profile page
 */
const ChangeProfilePage = () => {
  const [name, setName] = React.useState('');
  const [address, setAddress] = React.useState('');
  
  /**
   * Save input changes from form component into page state
   */
  const handleChangeValue = (key, value) => {
    switch (key) {
      case 'name':
        return setName(value);
      case 'address':
        return setAddress(value);
      default:
        return;
    }
  };
  
  /**
   * Do something on submit. For simplicity, let's just make
   * this page log something.
   */
  const handleSubmit = () => {
    console.log(name, address);
  };

  return (
    <div className="content">
      <h1>Edit Profile</h1>
      <UsersBioForm
        name={name}
        address={address}
        onChangeValue={handleChangeValue)
        onSubmit={handleSubmit}
      />
    </div>
  );
};

RegistrationPage.jsx

/**
 * This demonstrate example of UsersBioForm usage at dummy
 * registration page
 */
const RegistrationPage = () => {
  const [name, setName] = React.useState('');
  const [address, setAddress] = React.useState('');
  
  /**
   * Save input changes from form component into page state
   */
  const handleChangeValue = (key, value) => {
    switch (key) {
      case 'name':
        return setName(value);
      case 'address':
        return setAddress(value);
      default:
        return;
    }
  };
  
  /**
   * Do something on submit. For simplicity, let's just make
   * this page log something.
   */
  const handleSubmit = () => {
    console.log(name, address);
  };

  return (
    <div className="content">
      <h1>Registration</h1>
      <UsersBioForm
        name={name}
        address={address}
        onChangeValue={handleChangeValue)
        onSubmit={handleSubmit}
      />
    </div>
  );
};

UserBioForm.jsx

/**
 * User's biodata form
 *
 * Forms like this are usually used in registration and user's profile page.
 * In this example, we unify this form as CreateUsersForm function to
 * generate name and address field
 */

/**
 * Generate users biodata form
 */
const UsersBioForm = ({
  name = '',
  address = '',
  onChangeValue
  onSubmit,
}) => {
  /**
   * Handle all input change, pass key and value pair as argument
   * to `onChangeValue` props.
   */
  const handleInputChange = (event) => {
    const inputKey = event.target.name;
    const inputValue = event.target.value;
    onChangeValue(inputKey, inputValue);
  };

  return (
    <form className="form" onSubmit={onSubmit}>
      <div className="control">
        <label>Name</label>
        <input
          type="text"
          value={name}
          name="name"
          placeholder="Put your name here"
          onChange={handleInputChange}
        />
      </div>
      <div className="control">
        <label>Address</label>
        <textarea
          name="address"
          value={address}
          rows="4"
          onChange={handleInputChange}
        />
      </div>
    </form>
  );
};

export default UsersBioForm