Question 175470 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can Reactjs and Axios make a Post request?

I catch the input values, and add them to the date object. The problem is that the mail field is included in an internal object (data{data{mail:""}}). Below is my code, I don’t understand how to add a value to an internal object.

const data = {object_type: "person", name: "", object_code: "", data: {}} //add here
const [inputData, setInputData] = useState(data)

  const handleChange = (e) => {
    setInputData({...inputData, [e.target.name]: e.target.value})
    console.log(e.target.name)
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.post(url, inputData)
      .then((response)=> {
        console.log(response)
      })
  }

 <form onSubmit={handleSubmit}>
      <label htmlFor="create-form-name">
        Имя
        <input id="name" type="text" name="name" value={inputData.name} onChange={handleChange}/>
      </label>
      <label htmlFor="create-form-name">
        Телефон
        <input id="phone" type="tel" name="object_code" value={inputData.object_code} onChange={handleChange}/>
      </label>
      <label htmlFor="create-form-name">
        Электронный адрес
        <input id="mail" type="email" name={data.data.mail} /* value={inputData.data.data} */ onChange={handleChange}/>
      </label>
      <button className="button-create-contact" type="submit">Создать</button>
    </form>

I thought about making more constants, but it seems like a bad practice

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    const [inputData, setInputData] = useState({object_type: "person", name: "", object_code: "", data: {mail:""}})


  const handleChange = (e) => {
    setInputData({...inputData, [e.target.name]: e.target.value})
  }

  const handleMailChange = (e) => {
    setInputData({...inputData, data: {...inputData.data, mail: e.target.value}})
  }

  const handleSubmit = (e) => {
    /* e.preventDefault(); */
    axios.post(url, inputData)
      .then((response)=> {
        console.log(response)
      })
  }

  return(
    <>
    <div className="create-panel">
      <h2>Заполнение анкеты для нового контакта</h2>
    </div>
    <div className="create-form">
    <form onSubmit={handleSubmit}>
      <label htmlFor="create-form-name">
        Имя*
        <input id="name" type="text" name="name" value={inputData.name} onChange={handleChange} required/>
      </label>
      <label htmlFor="create-form-name">
        Телефон*
        <input id="phone" type="tel" name="object_code" value={inputData.object_code} onChange={handleChange} required/>
      </label>
      <label htmlFor="create-form-name">
        Электронный адрес
        <input id="mail" type="email" name="mail" value={inputData.data.mail} onChange={handleMailChange}/>
      </label>
      <button className="button-create-contact" type="submit">Создать</button>
    </form>
    {/* <button style={{border:"1px solid black", padding:"5px"}} onClick={() => {
      console.log(inputData)
      }}>Click</button> */}
    </div>
    </>
  )

  2. 0

    You can try this-

    <input id="mail" type="email" name='mail' value={inputData.data.mail} onChange={
(e)=>{
setInputData({...inputData.data, mail: e.target.value })
}}/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search