Get specific state value when using custom Hooks ( trying to implement a form handling with hooks)

Question

I'm implementing a form using React hooks instead of classes and states. This is my form:

const { values, handleChange, handleSubmit } = useForm();
  const [gender, setGender] = useState("");

   return (
      <>
     <ul className="collapsible">
        <li>
          <div className="collapsible-header">Step 1: Your details</div>
          <div className="collapsible-body">

                  <div>
                     <label>First name</label>
                  <input className="browser-default" type="text" name="name" value={values.name} onChange={handleChange}/>
                  </div>
                  <div><label>Last name</label>
                  <input className="browser-default" type="text" name="lastName" value={values.lastName} onChange={handleChange}/> </div>

                   <div><label>Email</label>
                  <input className="browser-default" type="text" name="email" value={values.email} onChange={handleChange}/>
                </div>

                 <button type="submit" className="browser-default">Next></button>

          </div>

this is my custom hook component useForm:

import { useState } from 'react';

const useForm = (callback) => {

  const [values, setValues] = useState({});

  const handleSubmit = (event) => {
    if (event) event.preventDefault();
      callback();


  };

  const handleChange = (event) => {
    event.persist();
    setValues(values => ({ ...values, [event.target.name]: event.target.value }));
  };

  return {
    handleChange,
    handleSubmit,
    values,
  }
};

export default useForm;

now I would like to create an Object with the data of the submitted form to post with Axios on a server. The object should be like this:

let data ={
        firstName: name,
        lastName: lastName,
        email:email,
        number:number,
        gender:gender,
        dob: `${day}-${month}-${year}`,
        comments: comments
      }

considered that with the custom Hook I've created basically only one state "values", how can i assign the respective value to each property? For example " firstName: [event.target.name] " would work? Thank you guys!

Answer 1

Can you not just do this?

let data ={
  firstName: values.name,
  lastName: values.lastName,
  email: values.email,
  ... etc
}

Values is an object, so to use its individual values you would just access the corresponding keys. values.your_key .

Answer 2

Your example will work fine, you have to take care of below issues:

1. firstName: you don't have a form field with that name. because you are depending on mapping between form fields names and JSON object, so you have to make sure that each form field name is exactly what you want in your JSON object key.

2. You will get A component is changing an uncontrolled input of type text to be controlled. error, because the form field value will have undefined as initial value. two possible fixes, the easiest is on each form field the value attribute to be like value={values.name || ''} value={values.name || ''} .