update value state in array of objects

Question

State:

const [tiles, setTiles] = useState(tilesData)

Data inside state: (tilesData)

const defaultValueCard = {
   name: 'Bahamut',
   cardValues: { N: 0, E: 0, S: 0, W: 0 },
   image: 'URL'
}

export const tilesData =
   [
      { tileNumber: 1, card: defaultValueCard },
      { tileNumber: 2, card: defaultValueCard },
      { tileNumber: 3, card: defaultValueCard },
      { tileNumber: 4, card: defaultValueCard },
      { tileNumber: 5, card: defaultValueCard },
      { tileNumber: 6, card: defaultValueCard },
      { tileNumber: 7, card: defaultValueCard },
      { tileNumber: 8, card: defaultValueCard },
      { tileNumber: 9, card: defaultValueCard },
      { tileNumber: 10, card: defaultValueCard },
      { tileNumber: 11, card: defaultValueCard },
      { tileNumber: 12, card: defaultValueCard },
      { tileNumber: 13, card: defaultValueCard },
      { tileNumber: 14, card: defaultValueCard },
      { tileNumber: 15, card: defaultValueCard },
      { tileNumber: 16, card: defaultValueCard }
   ]

The updateTile function receives a tileIndex (numbered between 1-16) and a new card which contains the same data as the defaultValueCard.

How can I inside this function update the state to replace the old card with a new one at the specific index?

const updateTile = (tileIndex, card) => {
 /* take the tileIndex and update the current card with the parameter card */
}

Does this answer your question? Find object by id in an array of JavaScript objects — Tyler Stoney
– Tyler Stoney, Commented Dec 13, 2021 at 15:13
The accepted answer is vanilla js; they provided the links to the MDN in each option — Tyler Stoney
– Tyler Stoney, Commented Dec 13, 2021 at 15:19

Gaurav · Accepted Answer · 2021-12-13 15:24:01Z

1

Try this...

const [tiles, setTiles] = useState(tilesData);

const updateTile = (tileIndex, card) => {
 /* take the tileIndex and update the current card with the parameter card */
 const tilesCopy = [...tiles];
 const oldTileIndex = tilesCopy.findIndex(tile => tile.tileNumber === tileIndex);
 // a word of caution, oldTileIndex is undefined if tile with tileIndex DNE
 tilesCopy[oldTileIndex] = {tileNumber: tileIndex, card};
 setTiles(tilesCopy);
 
}

answered Dec 13, 2021 at 15:24

Gaurav

2,0802 gold badges18 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

update value state in array of objects

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related