score:1

Accepted answer

By doing this,

<input type="file" onChange={(e)=>(productPicture=URL.createObjectURL(e.target.files[0]))} key={productPicture.inputKey}></input><br/>

You are directly trying to mutate the state, productPicture=URL.createObjectURL(e.target.files[0]) which is wrong. Here you are not setting state. To set actual state you need to make use of setproductPicture setter function.

<input type="file" onChange={setImage} key={productPicture.inputKey} />

And setImage function should be,

const setImage = (e) => {
  console.log(e.target.files[0].name);
  let file = e.target.files[0];  //Capture the file in variable otherwise event gets nullified and you won't get file.
  setproductPicture(prevState=>({
     ...prevState,
     file: URL.createObjectURL(file)
  }))
}

Demo

Note: input is an empty tag, don't close it like <input></input>. You can just do this, <input />.


Related Query

More Query from same tag