How to Pass Checkbox State to Onclick Function in React

How to pass checkbox state to onClick Function in React

You can pass event object from onClick handler to action method as below:

<input type="checkbox"
       name={field}
       id={field}
       onClick={(event) => this.buildTemplate(objectA, objectB, event)}
/>

checkbox onclick changing only after refreshing react js

Your code is quite unorganized and muddled, but essentially you just need to trigger refetching the data once it is updated. The getData function already does this when the component mounts. Call this function after the successful POST request in the handleCheckClick handler.

handleCheckClick = (e, stateVal, index) => {
  ...

  const headers = {
    Authorization: `token xxxxxx`
  };

  axios
    .post(
      "customer/symptoms-submit/",
      data,
      { headers }
    )
    .then(() => {
      alert("symptom was submitted");
      this.getData(); // <-- trigger refetch data here
    })
    .catch((error) => {
      alert("Cannot add symptoms again");
    });
};

React Checkbox not sending onChange

To get the checked state of your checkbox the path would be:

this.refs.complete.state.checked

The alternative is to get it from the event passed into the handleChange method:

event.target.checked

---

Related Topics