Why can't I change my input value in React?

Question

I'm doing a recipe project and I want the user to add a recipe.

I'll add data via input but I cannot make any changes on "video URL" and "ingCount" inputs. I do not understand why this is so. Other inputs work fine and they work smoothly..

I just can't enter values into ingCount and videoLink.

*** Their names on the API are also correct.

const [addRecipe, setAddRecipe] = useState({
    id: "",
    title: "",
    description: "",
    image: "",
    category: "",
    time: 0,
    ingCount: 0,
    servings: 0,
    videoLink: "",
    ingredients: "",
    makeDetails: ""
  })

  const handleChange = (e) => {
    setAddRecipe({
      id: Math.random() * 100,
      ...addRecipe,
      [e.target.name]: e.target.value
    })
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    setRecipes([...recipes, addRecipe])
    axios
      .post(
        "https://5fccb170603c0c0016487102.mockapi.io/api/recipes",
        addRecipe
      )
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })
    setAddRecipe(addRecipe)
    console.log(handleSubmit)
  }

<form onSubmit={handleSubmit}>
          <div>
            <input
              type="text"
              name="title"
              value={addRecipe.title}
              onChange={handleChange}
              placeholder="baslik giriniz"
            />
          </div>
          <div>
            <input
              type="text"
              name="description"
              value={addRecipe.description}
              onChange={handleChange}
              placeholder="tarif aciklamasi"
            />
          </div>
          <div>
            <input
              type="text"
              name="category"
              value={addRecipe.category}
              onChange={handleChange}
              placeholder="kategori"
            />
          </div>
          <div>
            <input
              type="number"
              name="time"
              value={addRecipe.time}
              onChange={handleChange}
              placeholder="süre"
            />
          </div>
          <div>
            <input
              type="number"
              name="malzeme"
              value={addRecipe.ingCount}
              onChange={handleChange}
              placeholder="malzeme sayısı"
            />
          </div>
          <div>
            <input
              type="number"
              name="servings"
              value={addRecipe.servings}
              onChange={handleChange}
              placeholder="kişilik"
            />
          </div>

          <div>
            <input
              type="text"
              name="ingredients"
              value={addRecipe.ingredients}
              onChange={handleChange}
              placeholder="malzemeler"
            />
          </div>
          <div>
            <input
              type="text"
              name="makeDetails"
              value={addRecipe.makeDetails}
              onChange={handleChange}
              placeholder="yapilisi"
            />
          </div>
          <div>
            <input
              type="text"
              name="image"
              value={addRecipe.image}
              onChange={handleChange}
              placeholder="resim"
            />
          </div>
          <div>
            <input
              type="text"
              name="video"
              value={addRecipe.videoLink}
              onChange={handleChange}
              placeholder="video"
            />
          </div>
          <button className="todoform__btn" type="submit">
            Tarifi ekle!
          </button>
        </form>

Zeke Hernandez · Accepted Answer · 2020-12-16 15:36:52Z

4

Those are the only two fields where the name doesn't match with the value property. For the ingCount you have malzeme as the name. And for videoLink you have video as the name.

So for those, when

    setAddRecipe({
      id: Math.random() * 100,
      ...addRecipe,
      [e.target.name]: e.target.value
    })

is called, you are setting a property that will never be used.

answered Dec 16, 2020 at 15:36

Zeke Hernandez

1,34611 silver badges15 bronze badges

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

Comments

Nitin Dev · Accepted Answer · 2020-12-16 15:43:03Z

1

You are setting state values using "name" attribute, for ingCount and video, "name" attributes in input fields are different than state hence its not getting updated.

<input type="number" name="ingCount" value={addRecipe.ingCount} onChange={handleChange} placeholder="malzeme sayısı" />
<input type="text" name="videoLink" value={addRecipe.videoLink} onChange={handleChange} placeholder="video" />

answered Dec 16, 2020 at 15:43

Nitin Dev

1191 bronze badge

Comments

Sujoy Saha · Accepted Answer · 2020-12-16 15:45:39Z

1

The name has to be same in input field and object name. Currently for these its different ->

       <input
          type="text"
          name="video". //should be video Link
          value={addRecipe.videoLink}
          onChange={handleChange}
          placeholder="video"
        />

Update this it will resolve your issue. Also I will suggest you to use callback inside setState. Otherwise all the fields might not get saved in the state.

setState (prev => ({...prev, key: value})

edited Dec 16, 2020 at 15:45

answered Dec 16, 2020 at 15:41

Sujoy Saha

2202 silver badges13 bronze badges

1 Comment

ogulcan Over a year ago

I'm grateful for ur help! thank you so much!

Collectives™ on Stack Overflow

Why can't I change my input value in React?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related