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>

Answer 1

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.

Answer 2

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})

Answer 3

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" />