How to api call in onChange function on CheckBox field React js

Question

I want to call a post API while changing the checkbox input. Right now I am doing this in the below pattern but while the Component re-renders, this API function got called. What to do, please?

 const [check, setCheck] = useState();
 
  async function fetchConfigApi() {
    try {
       const result = await axios.get(`/configuration/${system_id}`);
       const { status, data } = result;
       setConfigData(data);
       setCheck(data.self_service);
    } catch (e) {
      console.log("error response", e.response);
    }  
  }

  async function postSelfService() {
   try {
      const fd = new FormData();
      fd.append("self_service", check);
      const result = await axios.put(`/configuration/${system_id}`, fd);
      fetchConfigApi();
    } catch (e) {
      console.log("error response", e.response);
    }   
  }  

  const onSelfServiceChange = (e) => { setCheck(!check); };

  useEffect(() => { fetchConfigApi(); }, []);

  useEffect(() => { postSelfService(); }, [check]);

return (
    <div className={classes.subContainer}>
        <div>
          <FormControlLabel
            control={
               <Checkbox
                checked={check}
               onChange={onSelfServiceChange}
                 name="check"
               />
             }
             label="Enable Self Service"
           />    </div> )

b3hr4d · Accepted Answer · 2021-01-12 08:11:26Z

2

Just remove the second useEffect and put your API call inside onChange function like this:

For a better user experience and void unnecessary calls, you should add a loading state when the user clicks on the checkbox that gets disabled while fetching the result, then checked or unchecked based on the response.

const App = () => {
  const [data, setConfigData] = React.useState(false);
  const [check, setCheck] = React.useState(false);
  const [loading, setLoading] = React.useState(true);

  function fetchConfigApi() {
    try {
      // simulate api call
      setTimeout(()=> {
        setConfigData("new data on: "+ new Date() )
        setCheck(prev=>!prev);
        setLoading(false);
      },500)
    } catch (e) {
      console.log("error response", e.response);
    }
  }

  function postSelfService() {
    try {
      // simulate api call
      setTimeout(()=> fetchConfigApi(),500)
    } catch (e) {
      console.log("error response", e.response);
    }
  }

  const onSelfServiceChange = (e) => {
    setLoading(true);
    postSelfService();
  };

  React.useEffect(() => {
    fetchConfigApi();
  }, []);

  return (
    <div>
        <label>
          <input
            type="checkbox"
            checked={check}
            onChange={onSelfServiceChange}
            name="check"
            disabled={loading}
          />
          Enable Self Service 
        </label>
        <hr/>
        <p>{loading ? "loading..." : data}</p>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

edited Jan 12, 2021 at 8:11

answered Jan 5, 2021 at 7:49

b3hr4d

4,6381 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Darda Over a year ago

initially i have tried it but the propblem is when i am getting this check data from api and put it in my checkbox its alwas showing cheked. But when i am checking and adding another save button to hit the post api its working fine. Let me know if u know issue. Thanx

b3hr4d Over a year ago

Oh true, I see we call setCheck twice. I did make my answer better by adding a loading state when the user clicks on the checkbox, get disable while fetching the result, then check box checked or unchecked based on response.

Darda Over a year ago

bro i am appreciating ur help. but even its not working.

b3hr4d Over a year ago

I'll make you an example, here.

Collectives™ on Stack Overflow

How to api call in onChange function on CheckBox field React js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related