javascript - Get values from form with React and Axios

Question

** Hi, I'm having issues to get the values from my form inputs in a post request. The post request works, I don't get any errors, but I can't save what I type in each field. I get an error that says data hasn't been defined. I've added value={addPub.name} (to each of them with their correspondent name) but still doesn't work. Any help would be very much appreciated, thanks in advance**

function AddPub() {
      const [addPub, setAddPub] = useState({
        name: "",
        email: "",
        phone: "",
        group: ""
      })

  const handleChange=e=> {
    const {name, value}=e.target
    setAddPub(prevState=>({
      ...prevState,
      [name]: value
    }))
    console.log(addPub)
  }

  const postPub=async()=> {
    await axios.post("http://dev.pubmate.io/pubmate/api/0.1/pub", addPub )
    .then( 
      response=>{
      console.log(response)
      //setAddPub(data.concat(response.data)). --> Currently commented out due to error with data
    })
    
  }

  useEffect(async()=> {
    await postPub()
  }, [])



  return (
    < div className="addpub">
      <h1>Pub Information</h1>
      <div className="addpub__container">
        <button className="addpub__buttonName" onClick={openForm("name")}>Pub Details<span className="arrow">▼</span></button>
        <div id="Name"  className="form" style={{display: "block"}}>
          <form className="addpub__form">
            <TextField className="addpub__input" value={addPub.name} name="name" label="Name" onChange={handleChange}/>
            <br />
            <TextField className="addpub__input" value={addPub.email} name="email" label="Email" onChange={handleChange}/>
            <br />
            <TextField className="addpub__input" value={addPub.phone} name="phone" label="Phone" onChange={handleChange}/>
            <br />
            <TextField className="addpub__input" value={addPub.group} name="group" label="Group" onChange={handleChange}/>
            <br />
            <div className="addpub__buttons addpub__buttons_name">
              <button className="addpub__save" onClick={postPub}>SAVE</button>
              <Link className="addpub__cancel" to="/">CANCEL</Link>
            </div>
          </form>
       </div>

}

Answer 1

You are destructuring your values inside handleChange. But you are not passing that value from the TextField to your actual handleChange function.

Try this for each of the TextField:

<TextField className="addpub__input" value={addPub.name} name="name" label="Name" onChange={(e) => handleChange(e) }/>
            
<TextField className="addpub__input" value={addPub.email} name="email" label="Email" onChange={(e) => handleChange(e) }/>
            
<TextField className="addpub__input" value={addPub.phone} name="phone" label="Phone" onChange={(e) => handleChange(e) }/>
            
<TextField className="addpub__input" value={addPub.group} name="group" label="Group" onChange={(e) => handleChange(e) }/>
        

You should also try to refactor your useEffect to:

useEffect(() => {
    ;(async () => await postPub())()
}, [])

As a suggestion. If you'd like to try another option. FORMIK is a great tool.