Cordial saludo, este es una pequeña app con react, cada ves que hago clic en el boto next se muestra un elemento diferente del data (variable descrita en el código), pero necesito que cada ves que muestro un elemento este se elimine de la data, intente con filter y si me elimina el elemento pero solo el primero los siguientes no los va eliminando, el json tiene 102 elementos, elimina la primera ves pero después siempre se queda en 101 en cada clic.
la pregunta es como puedo ir teniendo una data que no contenga en cada clic elemento que va mostrando. Muchas gracias.
este es el json https://gist.github.com/carmandomx/3d7ac5f15af87a587e1d25f5ba96de61
import React, { useEffect, useState } from "react";
import quotes from "../quotes.json"
export default function QuoteBox(props) {
let randomNumber;
let data = quotes["quotes"];// esta variable guarda el objeto de JSON para poder iterarlo a futuro.
const [quote, setQuote] = useState(data[0]); // El primer quote que se mostrara estará en el primer estado y este
//sera el primero del archivo Json.
function change() {
//usar esta formula para determinar un número aleatorio entre 0 hasta el total del Json a recorrer "Math.random() * (max - min) + min"
randomNumber = Math.floor(Math.random() * ((data.length - 1) - 0) + 0)
setQuote(data[randomNumber]) // actualizamos el valos del estado
console.log(data[randomNumber]);
let newData = data.filter(elem => data[randomNumber].author !== elem.author)
data = newData;
console.log(data);
}
return (
<div>
<h2>Author</h2>
<h1>{quote.author}</h1>
<span>{quote.quote}</span>
<div>
<button onClick={() => change()}>Next</button>
</div>
</div>
)
}