React event handler sets to null after API call

Question

I am facing strange issue today

I'm calling method on onChange

UI:

Data: 
<form onChange={this.handleChangeattribute} >
 <DynamicInputs dynamicAttributes={this.state.dynamicAttributes}/>
</form>

My dynamic input file:

import React from "react"

const DynamicInputs = (props) => {
  return (
    props.dynamicAttributes.map((val, idx)=> {
      let catId = `title-${idx}`, ageId = `image-${idx}`
      return (
        <div key={idx}>
         <br/>
          <label htmlFor={catId}>{`${idx + 1}:`}</label>
          <br />
          Title <input
            type="text"
            name={catId}
            data-id={idx}
            id={catId}
            value={props.dynamicAttributes[idx].title} 
            className="title"
          /><br/><br/>
          Image: <input
            type="file"
            data-id={idx} id={ageId} className="image"
          />
          <br/><br/>
          Description<input
            type="text"
            name={catId}
            data-id={idx}
            id={catId}
            value={props.dynamicAttributes[idx].description} 
            className="description"
          />
          <br/>
        </div>
      )
    })
  )
}
export default DynamicInputs

Function:

handleChangeattribute = async (e) => {
  // here I got all function of the event including value of e.target.dataset.id
  if (["title", "image", "description"].includes(e.target.className) ) {
    let dynamicAttributes = [...this.state.dynamicAttributes]
    if(e.target.className === "title") {
      dynamicAttributes[e.target.dataset.id][e.target.className] = e.target.value
    }
    if(e.target.className === "image") {
          let data
          await axios.post(data)
            .then((result) => {
               data = result
            });
            console.log("e.target", e) 
            console.log("e.target", e.target)
          dynamicAttributes[e.target.dataset.id][e.target.className] = data
    }
    if(e.target.className === "description") {
      dynamicAttributes[e.target.dataset.id][e.target.className] = e.target.value
    }
    this.setState({ dynamicAttributes }, () => console.log(this.state.dynamicAttributes))
  } else {
    this.setState({ [e.target.title]: e.target.value })
  }
}

when I select image and then axios call was done then I got an error like this

ExploreDetails.js:86 Uncaught (in promise) TypeError: Cannot read property 'dataset' of null

and in the handleChangeattribute method first console, I got this and in the second I got null

Answer 1

I have refactored the code here. Please let me know if it works. Your use of async/await in combination with .then() doesn't make sense, so I have changed it to just use .then().

handleChangeattribute = (e) => {
  // here I got all function of the event including value of e.target.dataset.id
  if (["title", "image", "description"].includes(e.target.className)) {
    let dynamicAttributes = [...this.state.dynamicAttributes]
    if (e.target.className === "title") {
      dynamicAttributes[e.target.dataset.id][e.target.className] = e.target.value
    }
    if (e.target.className === "image") {
      let data
      axios.post(data)
        .then((result) => {
          console.log("e.currentTarget", e.currentTarget)
          dynamicAttributes[e.currentTarget.dataset.id][e.target.className] = result
        });
    }
    if (e.target.className === "description") {
      dynamicAttributes[e.target.dataset.id][e.target.className] = e.target.value
    }
    this.setState({ dynamicAttributes }, () => console.log(this.state.dynamicAttributes))
  } else {
    this.setState({ [e.target.title]: e.target.value })
  }
}

Answer 2

You are declaring the data variable without assigning it any value. Axios post request require a value.

if(e.target.className === "image") {
      let data //this is undefined
      await axios.post(data) //axios will make a post request to undefined
        .then((result) => {
          let data = result
        });
        console.log("e.target", e) 
        console.log("e.target", e.target)
      dynamicAttributes[e.target.dataset.id][e.target.className] = data
}