Imagine que tiene un componente principal (por ejemplo, HamstersList ) que devuelve/presenta una lista de estos componentes de Hamster ; sería preferible declarar ese método deleteHamster en él, por lo que podría: a) pasar algún accesorio como hidden en cada Hamster o b) recuperar la lista de todos los hámsteres de la API después de que uno se haya "eliminado" c) eliminar el hámster "eliminado" de una matriz que se almacenó localmente en ese componente principal de la lista.

Pero dado que está tratando de archivar esto dentro de Hamster , algunos cambios podrían ayudarlo:

• cambie la línea de state a const [hamsterDeleted, setHamsterDeleted] = useState(false)

• llame a setHamsterDeleted(true) dentro del método deleteHamster después de la recuperación esperada.

• un pequeño ajuste de "renderización condicional" dentro de return, para que en realidad no se reproduzca nada cuando el Hamster actual tiene hamsterDeleted establecido en true :

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

¿Qué quieres hacer en caso de que se elimine el hámster? Si no desea devolver nada, simplemente puede devolver null .

No estoy muy seguro de si debo agregar algún parámetro a SetHamsterDeleted para que funcione.

Sí, haría de esto un booleano en su lugar. Aquí hay un ejemplo:

 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> ); };

¡SIN EMBARGO! Hacer que cada hámster realice un seguimiento de su estado eliminado no suena bien (por supuesto, no conozco todos sus requisitos, pero parece extraño). Supongo que tiene un componente principal que busca todos los hámsteres; ese sería un mejor lugar para realizar un seguimiento de lo que se ha eliminado y lo que no. De esa manera, si se elimina el hámster, simplemente no podría renderizar ese hámster. Algo más como esto:

 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} /> ))} </> ); }

Ahora puede hacer que el componente Hamster sea un componente de presentación que solo se preocupe por representar un hámster, por ejemplo:

 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> ); };