CODEWITHSUNDEEP
javascriptreactjsreact-nativerender
SwedieK
SwedieK

Reputation: 53

Reactj.s: Item deleted only after refresh | Delete Method

I'm trying to send a delete request to delete an item from an API. The API request is fine when clicking on the button. But Item get's deleted only after refreshing the browser! I'm not too sure if I should add any parameter to SetHamsterDeleted for it to work?

This is what my code looks like.

import React, {useState} from "react";
const Hamster = (props) => {

   const [hamsterDeleted, setHamsterDeleted] = useState("")


  
    async function deleteHamster(id) {
        const response = await fetch(`/hamsters/${id}`, { method: "DELETE" });
        setHamsterDeleted()
        
    
        }

              
         return (
            <div>
             <p className={props.hamster ? "" : "hide"}>
                 {hamsterDeleted}
             </p>
             
            <button onClick={() => deleteHamster(props.hamster.id)}>Delete</button>
            <h2>{props.hamster.name}</h2> 
            <p>Ålder:{props.hamster.age}</p> 
            <p>Favorit mat:{props.hamster.favFood}</p> 
            <p>Matcher:{props.hamster.games}</p> 
            <img src={'./img/' + props.hamster.imgName} alt="hamster"/> 
            </div>
              )
        };
    
        
    

export default Hamster;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 0

Views: 714

Answers (2)

gerrod
gerrod

Reputation: 6627

What do you want to do in the case the hamster is deleted? If you don't want to return anything, you can just return null.

I'm not too sure if I should add any parameter to SetHamsterDeleted for it to work?

Yes, I'd make this a boolean instead. Here's an example:

import React, { useState } from "react";

const Hamster = (props) => {
    const [hamsterDeleted, setHamsterDeleted] = useState(false);

    async function deleteHamster(id) {
        const response = await fetch(`/hamsters/${id}`, { method: "DELETE" });
        setHamsterDeleted(true);
    }

    if (hamsterDeleted) return null;

    return (
        <div>
            <p className={props.hamster ? "" : "hide"}>
                {hamsterDeleted}
            </p>
            
            <button onClick={() => deleteHamster(props.hamster.id)}>Delete</button>

            <h2>{props.hamster.name}</h2> 
            <p>Ålder:{props.hamster.age}</p> 
            <p>Favorit mat:{props.hamster.favFood}</p> 
            <p>Matcher:{props.hamster.games}</p> 
            <img src={'./img/' + props.hamster.imgName} alt="hamster"/> 
       </div>        
    );
};

HOWEVER! Having each individual hamster keep track of its deleted state doesn't sound right (of course I don't know all your requirements but it seems odd). I'm guessing that you've got a parent component which is fetching all the hamsters - that would be a better place to keep track of what has been deleted, and what hasn't. That way, if the hamster is deleted, you could just not render that hamster. Something more like this:

const Hamsters = () => {
    const [hamsers, setHamsters] = useState([]);

    // Load the hamsters when the component loads
    useEffect(() => {
        const loadHamsters = async () => {
            const { data } = await fetch(`/hamsters`, { method: "GET" });
            setHamsters(data);
        }

        loadHamsters();
    }, []);

    // Shared handler to delete a hamster
    const handleDelete = async (id) => {
        await fetch(`/hamsters/${id}`, { method: "DELETE" });
        setHamsters(prev => prev.filter(h => h.id !== id));
    }

    return (
        <>
            {hamsters.map(hamster => (
                <Hamster 
                    key={hamster.id}
                    hamster={hamster}
                    onDelete={handleDelete} 
                />
            ))}
        </>
    );
}

Now you can just make the Hamster component a presentational component that only cares about rendering a hamster, eg:

const Hamster = ({ hamster, onDelete }) => {
    const handleDelete = () => onDelete(hamster.id);

    return (
        <div>
            <button onClick={handleDelete}>Delete</button>

            <h2>{hamster.name}</h2> 
            <p>Ålder:{hamster.age}</p> 
            <p>Favorit mat:{hamster.favFood}</p> 
            <p>Matcher:{hamster.games}</p> 
            <img src={'./img/' + hamster.imgName} alt="hamster"/> 
       </div>        
    );
};

Upvotes: 0

N Molchanov
N Molchanov

Reputation: 203

Imagine you have a parent component (say HamstersList) that returns/renders list of these Hamster components - it would be preferable to declare that deleteHamster method in it, so it could either: a) pass some prop like hidden into every Hamster or b) refetch list of all Hamsters from the API after one got "deleted" c) remove "deleted" hamster from an array that was stored locally in that parent List component.

But since you are trying to archive this inside of Hamster itself, few changes might help you:

  • change state line to const [hamsterDeleted, setHamsterDeleted] = useState(false)

  • call setHamsterDeleted(true) inside of deleteHamster method after awaited fetch.

  • a small tweak of "conditional rendering" inside of return, to actually render nothing when current Hamster has hamsterDeleted set to true:

    return hamsterDeleted ? null : (<div>*all your hamster's content here*</div>)

Upvotes: 1

Related Questions