update value of an object in an array - react hooks

Question

I want to increment the counter value of an item on click, I've tried to find the solution in the docs and I watched tutorials but I can't find the solution.

FruitCounter.js

import { Fragment, useState } from "react"
import Fruit from "./Fruit"

const data = [
    { id: 1, name: "🍋", counter: 0 },
    { id: 2, name: "🍒", counter: 0 },
]

const FruitCounter = () => {
    const [fruits, setFruits] = useState(data)

    const clickHandler = (fruit) => {
       // Increment 'counter value of clicked item by 1'
    }

    return (
        <Fragment>
            {fruits.map((fruit) => {
                return (
                    <Fruit
                        key={fruit.id}
                        {...fruit}
                        clickHandler={() => clickHandler(fruit)}
                    />
                )
            })}
        </Fragment>
    )
}

export default FruitCounter

Fruit.js

import React from "react"

const Fruit = ({ counter, name, clickHandler }) => {
    return (
        <button type="button" className="fruit" onClick={clickHandler}>
            <p>{counter}</p>
            <h2>{name}</h2>
        </button>
    )
}

export default Fruit

gmoniava · Accepted Answer · 2021-01-24 18:16:20Z

1

You can try this

  const clickHandler = (fruit) => {
    setFruits(
      fruits.map((x) => {
        if (x.id === fruit.id)
          return {
            ...x,
            counter: x.counter + 1,
          };
        return x;
      })
    );
  };

answered Jan 24, 2021 at 18:16

gmoniava

28.9k9 gold badges61 silver badges101 bronze badges

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

2 Comments

Ajeet Shah Over a year ago

As state updates may be asynchronous: setFruits((prevFruits) => prevFruits.map.....

gmoniava Over a year ago

@AjeetShah In general you are right, but inside click handler, when you don't have multiple setState calls, most of the times you will always read fresh state anyway.

Collectives™ on Stack Overflow

update value of an object in an array - react hooks

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related