React Hooks- useEffect and onClick issue

Question

I have created an API(for updating - PutMapping) which should get updated when I click on one buy button, but the problem here is when I click on one buy button, the API gets called for all the three buttons.

There are 3 cards with 3 buttons each, each card has its own rewards and redemption points, and accordingly the table should get updated. Here is the following code:

useEffect

const url = "http://localhost:8086/updatedata/";
    function clickFunc(points,rewards){
    useEffect(()=>{
        return axios.put(url+points+"/"+rewards);
      });
    }

The following code is for react cards and buttons:

<div class="col-md-4">
                <div class="blog-post">
                    <a href="blog-post.html" class="post-img">
                        <img src={bms} alt=""/>
                    </a>
                    <div class="post-content">
                        <h2>Bookmyshow </h2>
                        <h4 style={{color:"green"}}>Redemption Points: 800</h4>
                        <h2 style={{color:"red",align:"center"}}>Rs 300</h2>
                        <button variant="contained" onClick={clickFunc(800,300)} >BUY NOW</button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="blog-post">
                    <a href="blog-post.html" class="post-img">
                        <img src={hm} alt=""/>
                    </a>
                    <div class="post-content">
                        <h2>H&M Voucher</h2>
                        <h4 style={{color:"green"}}>Redemption Points: 3000</h4>
                        <h2 style={{color:"red",align:"center"}}>Rs 1000</h2>
                        <button variant="contained" onClick={axios.put("http://localhost:8086/updatedata/3000/1000")}>BUY NOW</button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="blog-post">
                    <a href="blog-post.html" class="post-img">
                        <img src={amazon} alt=""/>
                    </a>
                    <div class="post-content">
                        <h2>Amazon Voucher</h2>
                        <h4 style={{color:"green"}}>Redemption Points: 1500</h4>
                        <h2 style={{color:"red",align:"center"}}>Rs 750</h2>
                        <button variant="contained" onSubmit={axios.put("http://localhost:8086/updatedata/1500/750")}>BUY NOW</button>
                    </div>
                </div>
            </div>

Query Used String sql = "update details set available_points=available_points-?, total_rewards=total_rewards+?;";

Now, once I click on the Bookmyshow Voucher and check the table, the available_points reduces from suppose 10000 to 4700(i.e sum total of all 3 vouchers 10000 - (800+3000+1500) = 4700 and rewards goes from 0 to 2050)

How to avoid updating the table with all three, I only want to update the values where Buy Now is clicked and not all. Please help, thank you in advance. :)

Answer 1

Because you have not bound onClick and onSubmit events properly. Without ()=> functions will call every time it gets rendered.

 <button variant="contained" onClick={()=> clickFunc(800,300)} >BUY NOW</button>

 <button variant="contained" onClick={() => axios.put("http://localhost:8086/updatedata/3000/1000")}>BUY NOW</button>
                    </div>

 <button variant="contained" onSubmit={() => axios.put("http://localhost:8086/updatedata/1500/750")}>BUY NOW</button>

Also, the below implementation is wrong. You can not use lifecycle hooks inside normal functions.

const url = "http://localhost:8086/updatedata/";
function clickFunc(points,rewards){
    useEffect(()=>{
        return axios.put(url+points+"/"+rewards);
    });
}

https://reactjs.org/docs/hooks-reference.html#useeffect