How can I increment/decrement separate counters in React?

Question

I made a ticket order system for a project, however when I want to increment the amount of one of the tickets both of the counters increase. I am not sure why this happens, but I assume it is because only one value is stored in state.

export default function Ticket() {

    const [count, setState] = useState(0); // useState returns a pair. 'count' is the current state. 'setCount' is a function we can use to update the state.

    function increment(e) {
        //setCount(prevCount => prevCount+=1);
        setState(function (prevCount) {
            return (prevCount += 1);
        });
    }

    function decrement() {
        setState(function (prevCount) {
            if (prevCount > 0) {
                return (prevCount -= 1);
            } else {
                return (prevCount = 0);
            }
        });
    }


    return (
        <div>
            <section className="ticket-step">
                <h1>TICKETS</h1>
            </section>

            <div className="ticket-booking is-flexbox">

                <section className="ticket-content">

                    <ul className="tickets-tab is-flexbox">
                        <li>Tickets</li>
                        <li>Abbonementen</li>
                    </ul>


                    <div className="ticket-list-section">

                        <div className="ticket-list-details heading">
                            <div id="calender">
                                <h3>Datum : 30 - 10 - 2022</h3>
                            </div>

                            <div id="opening">
                                <h3>Openingstijden: 12:00 - 20:00 </h3>
                            </div>
                        </div>

                        <div className="ticket-list-details">

                            <div className="ticket-block">

                                <div className="ticket-title">
                                    <h3>Parkeer ticket</h3>
                                </div>
                                <div className="price">
                                    <h3>Prijs: $20</h3>
                                </div>
                                <div className="counter">
                                    <button className="increase-amount" onClick={increment}>+</button>
                                    <input type="text" className="amount" defaultValue="0" value={count}/>
                                    <button className="decrease-amount" onClick={decrement}>-</button>
                                </div>

                            </div>

                            <div className="ticket-block">

                                <div className="ticket-title">
                                    <h3>Early Horror-ticket</h3>
                                </div>
                                <div className="price">
                                    <h3>Prijs : $59</h3>
                                </div>
                                <div className="counter">
                                    <button className="increase-amount" onClick={increment}>+</button>
                                    <input type="text" className="amount" defaultValue="0" value={count}/>
                                    <button className="decrease-amount" onClick={decrement}>-</button>
                                </div>

                            </div>

                        </div>
                    </div>
                </section>

                <aside className="sidebar-overview">
                    <h1>besteloverzicht</h1>
                    <div className="sidebar-overview-content">

                    </div>
                    <hr/>
                    <div className="sidebar-overview-total">
                        <h3>Totaal: $0</h3>
                    </div>
                </aside>
            </div>
        </div>
    )
}

I tried to change useState and somehow store different states of the counters in an array, but that didn't work.

How can use the counters separately and store the state of the different buttons?

Answer 1

I'd say create a Button component and use that instead of adding more counters... as you might want to re-use this in different pages later as well.

Button.js

import { useState } from "react";

function Button() {
  const [count, setState] = useState(0); // useState returns a pair. 'count' is the current state. 'setCount' is a function we can use to update the state.

  function increment(e) {
    //setCount(prevCount => prevCount+=1);
    setState(function (prevCount) {
      return (prevCount += 1);
    });
  }

  function decrement() {
    setState(function (prevCount) {
      if (prevCount > 0) {
        return (prevCount -= 1);
      } else {
        return (prevCount = 0);
      }
    });
  }

  return (
    <div className="counter">
      <button className="increase-amount" onClick={increment}>
        +
      </button>
      <input type="text" className="amount" defaultValue="0" value={count} />
      <button className="decrease-amount" onClick={decrement}>
        -
      </button>
    </div>
  );
}

export default Button;

and just re-use it in your page;

export default function Ticket() {
    return (
        <div>
            <section className="ticket-step">
                <h1>TICKETS</h1>
            </section>

            <div className="ticket-booking is-flexbox">

                <section className="ticket-content">

                    <ul className="tickets-tab is-flexbox">
                        <li>Tickets</li>
                        <li>Abbonementen</li>
                    </ul>


                    <div className="ticket-list-section">

                        <div className="ticket-list-details heading">
                            <div id="calender">
                                <h3>Datum : 30 - 10 - 2022</h3>
                            </div>

                            <div id="opening">
                                <h3>Openingstijden: 12:00 - 20:00 </h3>
                            </div>
                        </div>

                        <div className="ticket-list-details">

                            <div className="ticket-block">

                                <div className="ticket-title">
                                    <h3>Parkeer ticket</h3>
                                </div>
                                <div className="price">
                                    <h3>Prijs: $20</h3>
                                </div>

                                <Button/>

                            </div>

                            <div className="ticket-block">

                                <div className="ticket-title">
                                    <h3>Early Horror-ticket</h3>
                                </div>
                                <div className="price">
                                    <h3>Prijs : $59</h3>
                                </div>

                                <Button/>

                            </div>

                        </div>
                    </div>
                </section>

                <aside className="sidebar-overview">
                    <h1>besteloverzicht</h1>
                    <div className="sidebar-overview-content">

                    </div>
                    <hr/>
                    <div className="sidebar-overview-total">
                        <h3>Totaal: $0</h3>
                    </div>
                </aside>
            </div>
        </div>
    )
}