Re-render after calling API-function through onClick in React

[nucky]

Hi, am working on this for a while and can’t find a logical solution formyself. I am having a function that is called via onClick. It would interact with an API to delete an entry. When deleted, I want to re-render the list which includes the clicked element. The API works, I see it in my database. But I can’t get it to re-render, like…

• Item 1 → Remove
• Item 2 → Remove
  I click on Remove in line with Item 2 it should re-render and show
• Item 1 → Remove

The code below shows what I already have. I have removed some HTML because it is less relevant.

If anybody could tell me what I need to do I’d be really grateful.

function Grade() {
    const [requests, setRequests] = useState([]);
    const isMounted = useRef(true)
    const [isSending, setIsSending] = useState(false)
    
    function Postrating(skill_id, inviter, invitee, rating) {

        var skillJSONObject = JSON.stringify({
            "function": "xyx",
            "post_user_id": invitee,
            "get_user_id": inviter,
            "skill_id": skill_id,
            "skill_rating": rating
        });
            fetch("myURL", {
                method: 'POST',
                body: skillJSONObject,
            })
            .then(response => response.json())

            .catch(error => {
                console.error('Error:', error);
            });
        return () => setIsSending(!isSending);
    }


    useEffect(() => {
        return () => {
            isMounted.current = false
        }
    }, [])

    useEffect(() => {
        fetch('https://api.website.com, {
            method: 'POST',
            
            body: JSON.stringify({
                "user_id": 1,
                "mode": 1
            }),
        })
            .then(response => response.json())
            .then((data) => setRequests(data["response"]["data"]))
            .catch(error => {
                console.error('Error:', error);
            });
    }, []);

    return <div className="pt-5">
                               <td class="px-6 py-4 text-center">
                            <button type="button" onClick={e=>Postrating(item.skill_id, item.user_id_inviter, item.user_id_invitee, 0)} className="text-blue-800 hover:underline">Skip</button>

}


export default Grade;

[Sky020]

Hello there,

I would imagine the most semantic workflow for this would be:

1. Page loads → useEffect fetches data, and sets response
2. onClick calls function to update server/db
3. Server/DB should respond saying ( “successful” or “unsuccessful”)
4. On response from server, new response (state) is set
5. When state changes, React re-renders - just what it does.

Now, you need to decide on step 3, whether you do the above, or you can update the state, based on the user interaction, and just hope the database is actually in sync - for small applications with few requests, a bad idea.

Hope this helps

[jsdisco]

I’ve been dealing with a similar problem for a while, I have a long list, fetched from an API, where I can add/update/delete items. I think there’s two fundamentally different ways to handle this:

1. Only fetch the data once, and handle all changes in the data in the frontend. As Sky mentioned, you might not be sure that the data you’re displaying is reflecting the actual current state of the database

2. On every change in the database made from the frontend, return the added item / updated item / a “delete success” message from the backend. Update the data on the frontend accordingly (that’s how I’m currently doing it, but it’s my own API, so I can adjust the responses accordingly as I wish). If you don’t have control over the API, you should still get some sort of indication of success of failure back, alternatively, you could re-fetch the whole data (probably not the most awesome solution)

BTW I don’t use useEffect (only for the initial fetch), but I’ve put all the logic for updating state into my click handlers. Not sure if that’s the best way.