checkbox onclick changing only after refreshing react js

Question

i have a accordion with checkboxes inside but when i click on check box doesnot toggle but data is submiited ,after refresh check box is toggled

https://codesandbox.io/s/vibrant-moon-9722j?file=/src/App.js:7492-11534 i have created a codesandbox here checkboxes inside User Defined is working i want the same for rest

the problem is because i am filtering the array based on catagery

<div className="accordion-item">
                    <div
                      style={styles.tilte}
                      className="accordion-title "
                      onClick={() => this.navClose("Head")}
                    >
                      {/* // onClick={setActiveCurrentIndex(item[0].date)}> */}
                      <div>Head</div>
                      <i class="fa fa-plus" aria-hidden="true"></i>
                    </div>
                    {this.state.navStatus ? (
                      <div className="accordion-content  tableforsymtm">
                        {this.state.items
                          .filter((person) => person.category == "Head")
                          .map((personData, key) => {
                            return (
                              <span className="trforsymtm">
                                <td key={personData.id}>
                                  <input
                                    // className="invinsiveinput"
                                    data-id={personData.id}
                                    type="checkbox"
                                    id={personData.id}
                                    checked={personData && personData.positive}
                                    onChange={(e) =>
                                      this.handleCheckClick(e, "items", key)
                                    }
                                    // defaultChecked={personData && personData.positive}
                                    // onChange={this.handleCheckClick}
                                  />
                                  {/* <label for={personData.id}>{personData.name}</label> */}
                                </td>
                                <td>{personData.name}</td>
                              </span>
                            );
                          })}
                      </div>
                    ) : null}
                  </div>
                  {/* ))} */}
                  <div className="accordion-item">
                    <div
                      style={styles.tilte}
                      className="accordion-title "
                      onClick={() => this.navClose("Pelvis")}
                      // onClick={setActiveCurrentIndex(item[0].date)}
                    >
                      <div>Pelvis</div>
                      <i class="fa fa-plus" aria-hidden="true"></i>
                    </div>
                    {this.state.Pelvis ? (
                      <div className="accordion-content  tableforsymtm">
                        {this.state.items
                          .filter((person) => person.category == "Pelvis")
                          .map((personData, key) => {
                            return (
                              <span className="trforsymtm">
                                <td key={personData.id}>
                                  <input
                                    // className="invinsiveinput"
                                    data-id={personData.id}
                                    type="checkbox"
                                    id={personData.id}
                                    checked={personData && personData.positive}
                                    onChange={(e) =>
                                      this.handleCheckClick(e, "items", key)
                                    }
                                    // defaultChecked={personData && personData.positive}
                                    // onChange={this.handleCheckClick}
                                  />
                                  {/* <label for={personData.id}>{personData.name}</label> */}
                                </td>
                                <td>{personData.name}</td>
                              </span>
                            );
                          })}
                      </div>
                    ) : null}
                  </div>
           

i think the error is passing the state value

handleCheckClick = (e, stateVal, index) => {
     let prevState = [...this.state[stateVal]];
  prevState[index].positive = e.target.checked;  // i think the error is here
  console.log(index);
  this.setState({ [stateVal]: prevState });
  var date = moment(this.state.dateState).format("YYYY-MM-DD");
  const { id, checked } = e.target.dataset;
  console.log(stateVal);
  if (e.target.checked) {
    var checkbox = "True";
  } else {
    var checkbox = "False";
  }

  const Data = {
    positive: checkbox,
    date: date,
    symptom: id
  };
  const headers = {
    Authorization: `token`
  };
  axios
    .post("customer/symptoms-submit/", Data, {
      headers: headers
    })
    .then(() => {
      alert("symptom was submitted");
    })
    .catch((error) => {
      alert("Cannot add symptoms again");
    });

  
};

Answer 1

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