Problem with manipulating data in array, react

Question

I use number useParams to get a number from a URL path and deck array to get data from data array which contains 32 objects with id and src (URL for image) properties.

// Images.js

const data = [
    {
        id:1,
        src:'https://###.com/###',
    },
    //...

const Images = () => {
    const {number} = useParams()
    const [deck, setDeck] = useState(data);
    //...

Then I use useEffect to fetch number from URL path and setCards() function to display proper amount of cards based on a given number from the URL by deleting indexes from number to deck.length. shuffle() function does not matter here it just places objects in a random order.

// Images.js

useEffect(() => {
  fetch(`http://localhost:3000/play/${number}`).then(setCards(number));
}, [number]);

const setCards = (number) => {
  let tempDeck = deck;
  tempDeck.splice(number, deck.length);
  shuffle(tempDeck);
  setDeck(tempDeck);
};

I also use this piece of code to render the proper amount of cards from the web page by routing to the proper URL path:

// Home.js

<div className="btn-group">
  <Link to="/play/8">
    <button className="btn">8 cards</button>
  </Link>
  <Link to="/play/16">
    <button className="btn">16 cards</button>
  </Link>
  <Link to="/play/24">
    <button className="btn">24 cards</button>
  </Link>
  <Link to="/play/32">
    <button className="btn">32 cards</button>
  </Link>
</div>;

Whenever I make an initial render and for example select "24 cards" button everything is fine, 24 out of 32 cards are displayed as should be, but when I come back to the "main page" and select a higher value of cards in this case it would be 32 from "32 cards" button, browser will display only 24 cards instead of 32. How can I fix it?

daje! scrivo una risposta più argomentata per gli altri così puoi accettarla — Francesco Clementi
– Francesco Clementi, Commented Nov 2, 2021 at 14:25

Francesco Clementi · Accepted Answer · 2021-11-02 14:26:24Z

1

With this code:

let tempDeck = deck;
tempDeck.splice(number, deck.length);

you are editing your original array.

You should consider to create a shallow copy of your original array and edit it:

let tempDeck = [...deck];
tempDeck.splice(number, deck.length);

answered Nov 2, 2021 at 14:26

Francesco Clementi

2,1204 gold badges16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem with manipulating data in array, react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related