resorte para animar los elementos en una aplicación de lista de tareas pendientes, de modo que cuando agrego / elimino un elemento, se desvanecen con la animación, pero el problema extraño es cuando lleno las entradas de título y descripción (simplemente llene sin enviar) y luego presione uno de los elementos botón Eliminar, ese elemento se eliminará, pero los datos en esas entradas completas crearán otro elemento, aquí está el código
const Search = (props) => { const [query, setQuery] = useState(""); const { todos, setTodos } = useContext(todosContext); const [currentPage, setCurrentPage] = useState(0); const getFilteredItems = (query, todos) => { if (!query) { return todos; } else { return todos.filter((todo) => todo.title.includes(query)); } }; const filteredItems = getFilteredItems(query, todos); const handlePageClick = ({ selected: selectedPage }) => { console.log("selectedPage", selectedPage); setCurrentPage(selectedPage); setQuery(""); }; const offset = currentPage * PER_PAGE; const currentPageData = filteredItems.slice(offset, offset + PER_PAGE); const deleteHandler = (id) => { axios.delete(`http://127.0.0.1:8000/todo/todos/${id}/`); setTodos( todos.filter((todo) => { return todo.id !== id; }) ); }; const transitions = useTransition(currentPageData, { from: { opacity: 0, transform: "translateY(-100px)" }, enter: { opacity: 1, transform: "translateY(0px)" }, leave: { opacity: 0, transform: "translateY(-100px)" }, keys: currentPageData.id, }); return ( <StyledDiv> {transitions((style, currentPageData) => currentPageData ? ( <animated.div style={style}> <Task key={currentPageData.id} title={currentPageData.title} description={currentPageData.description} backgroundColor="#ffffff" disabled={loading} onClick={() => deleteHandler(currentPageData.id)} type={"checkbox"} placeholder={"completed"} onChange={(e) => processChange(e, currentPageData.id)} checked={currentPageData.completed} id={currentPageData.id} htmlFor={currentPageData.id} marginTop="-5px" /> </animated.div> ) : ( "" ) )} </StyledDiv> ); }; export default Search;