'I wanna update a value to request with React axios from Django

This is one of value in Django api.

{
        "id": 89,
        "text": "dd",
         "checked": false
},
{
        "id": 90,
        "text": "dd",
        "checked": false
},

I wanna update the "checked" value like true/false to request with react axios.

Like a check toggle button.

const [check, setCheck] = useState(false);

return (
        <>
            <button onClick = { () => setCheck(!check) }>X</button>
            <div className = {`todo ${check && 'checked'}`}>{ text</div>
        </>
);


Solution 1:[1]

You should be calling an API on checkbox toggle (data sent to server and structure may vary as there is no exact code provided)

  • toggle function gets called on click of each checkbox, from the event we can get the value, and its current state of checked

  • put your API and the data to send correctly (I assumed from the data u put)

import "./styles.css";
import axios from "axios";

export default function App() {
  function toggle(e) {
    axios
      .post("/put-your-api-here", {
        id: e.target.value,
        text: e.target.value,
        checked: e.target.checked
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  return (
    <div className="App">
      {[1, 2, 3, 4, 5, 6, 7, 8].map((el) => (
        <>
          <input type="checkbox" onClick={toggle} value={el}></input>
          {el}
          {"  "}
        </>
      ))}
    </div>
  );
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1