Cant type in an input field of a form in React js

Question

I am new to React js. I tried post axios call using react hooks. But after implementing the code and starting the server, I cant type in the form. Previously I could type. I can only type in the phone and email fields. I cant type in first_name,last_name and message fields. I dont know what is the issue.

My MessageForm.js:

const MessageForm = () => {
  const url = 'https://example.herokuapp.com/api/messages'
  const [data, setData] = useState({
    first_name: "",
    last_name: "",
    email:"",
    phone:"",
    msz:""

  })
  function submit(e){
    e.preventDefault();
    axios.post(url,{
      first_name: data.first_name,
      last_name:data.last_name,
      email:data.email,
      phone:data.phone,
      msz:data.msz
    })
    .then(res=>{
      console.log(res.data)
    })
  }

  function handle(e){
      const newdata = {...data}
      newdata[e.target.id] = e.target.value
      setData(newdata)
      console.log(newdata)
  }

  return (
    <div className="message-form">
      <div className="container">
        <div className="title">
          <span>Contact Now</span>
          <div className="main-title">Send us a message</div>
        </div>
        {/* form start */}
        <form action="" className="apply" onSubmit={(e)=> submit(e)}>
          <div className="row row-1">
            {/* Name here */}
            <div className="input-field name">
              <label htmlFor="Name">First Name</label>
              <input onChange ={(e) => handle(e)} value = {data.first_name}
                type="text"
                placeholder="Your First Name"
                name="Name"
                id="name"
              />
            </div>
            <div className="input-field name">
              <label htmlFor="Name">Last Name</label>
              <input onChange ={(e) => handle(e)} value = {data.last_name}
                type="text"
                placeholder="Your Last Name"
                name="Name"
                id="name"
              />
            </div>
          </div>

          <div className="row row-2">
            {/* phone here */}
            <div className="input-field phone">
              <label htmlFor="Phone">Phone</label>
              <input onChange ={(e) => handle(e)} value = {data.phone}
                type="text"
                placeholder="Your Phone Here"
                name="Phone"
                id="phone"
              />
            </div>

            {/* Email here */}
            <div className="input-field email">
              <label htmlFor="Email">Email Address</label>
              <input onChange ={(e) => handle(e)} value = {data.email}
                type="text"
                placeholder="Your Email Address"
                name="Email"
                id="email"
              />
            </div>
          </div>

          {/* date select */}
          <div className="row row-3">
            {/* Message here */}
            <div className="input-field message">
              <label htmlFor="Message">Message</label>
              <textarea onChange ={(e) => handle(e)} value = {data.msz}
                placeholder="Enter Message Here"
                name="Message"
                id="message"
              />
            </div>
          </div>

          {/* submit button */}
          <ExploreButton hoverText="Submit" hover="hoverTrue">
            Send Now
          </ExploreButton>
        </form>
        {/* Form end */}
      </div>
    </div>
  );
};

export default MessageForm;

Is it for all inputs or just first_name and last_name?

Sinan Yaman
– Sinan Yaman

2021-08-16 10:17:57 +00:00
Commented Aug 16, 2021 at 10:17 — Sinan Yaman
– Sinan Yaman, Commented Aug 16, 2021 at 10:17
only for first name last name and message

Reactoo
– Reactoo

2021-08-16 10:18:31 +00:00
Commented Aug 16, 2021 at 10:18 — Reactoo
– Reactoo, Commented Aug 16, 2021 at 10:18

Sinan Yaman · Accepted Answer · 2021-08-16 10:16:04Z

1

It is because you are assigning id="name" to your first_name and last_name fields. So it doesn't change the correct field inside the data object.

Example on first_name:

 const handleInputChange = e => {
   setData(d => ({...d, [e.target.id]: e.target.value}))
 }

 <input onChange ={(e) => handle(e)} value = {data.first_name}
                onChange={handleInputChange}
                type="text"
                placeholder="Your First Name"
                name="Name"
                id="first_name"
              />

PS: You don't need to do onChange={e => handle(e)}. The handle will get the e argument as default with: onChange={handle}

answered Aug 16, 2021 at 10:16

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Reactoo Over a year ago

It worked thanks, but the form isnt submitting.. What might be the issue??

Sinan Yaman Over a year ago

What do you mean by not submitting? Is it not calling the submit function, or is it not sending the request?

Reactoo Over a year ago

Not sending the request

Sinan Yaman Over a year ago

Check the same request by using something like Postman. If it doesn't work there, probably something with the backend.

Sinan Yaman Over a year ago

You can put something like setData({first_name: "", last_name:"", email:"", phone:"", msz: ""}) inside the submit function

|

Viet · Accepted Answer · 2021-08-16 10:18:54Z

1

Update id="name" to id="first_name" and id="last_name"

Update id="message" to id="msz"

Name of key state must be the same with id

answered Aug 16, 2021 at 10:18

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Collectives™ on Stack Overflow

Cant type in an input field of a form in React js

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related