When I clicked a one button, all button automatically clicked

Question

Currently, I am creating a static ticket booking application for self-learning react. I use Bootstrap for styling

When I select the ticket count, it opens up in Seat Select:

const [select,setSelect]=useState(0);
const [seatCount,setSeatCount]=useState(select);
const [toggleSeat,setToggleSeat]=useState(false);

const ticketCountHandler=(e)=>{
    setSelect(e.target.value);
    console.log(e.target.value);
    setSeatCount(e.target.value)
  }

const ticketCount=Array.from({ length: 10 }, (_, index) => index + 1);
  

  const seatCountHandler=(e)=>{
    e.preventDefault();
    setToggleSeat(!toggleSeat); 

    if(!toggleSeat){
       setSeatCount(prev=>prev-1)
    }else{
      setSeatCount(prev=>prev+1)
    }
 }

seat count dropdown menu:

{/*count inputl start */}
              <div className="col-4">
              <select id="count" value={select} onChange={ticketCountHandler} className='form-select'>
                  <option selected disabled hidden>Select Ticket Count(max 10)</option>
                  {ticketCount.map((value) => (
                  <option key={value} value={value}>
                           {value}
                      </option>
                   ))}
                  
                </select>
              </div>
              {/*count input end */}

seat selection model:

<button type="button" class="btn form-control" data-bs-toggle="modal" data-bs-target="#seat-count">
  Select Seats
</button>


<div class="modal fade" id="seat-count" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Your Ticket Count {seatCount}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div className="row">
          <div className="col-1"></div>
          <div className="col-1 m-2"><button className='btn seat-btn disabled bg-danger'>100</button></div>
          <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={101} onClick={seatCountHandler}>101</button></div>
          <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={102} onClick={seatCountHandler}>102</button></div>
          <div className="col-1"></div>
          <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={103} onClick={seatCountHandler}>103</button></div>
          <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={104} onClick={seatCountHandler}>104</button></div>
          <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={105} onClick={seatCountHandler}>105</button></div>
          <div className="col-1"></div>
          <div className="col-1"></div>
        </div>

My problem is, now when I click on one button, all buttons are suddenly colored and the count only changes once even after clicking many buttons:

I need help to fix this issue, since last week I have been stuck in this issue, trying so many related questions, using Chatgpt/bard, and watching some yt videos..still can't fix this issue.

Answer 1

Short and simple answer, you have one common toggleSeat for all seat buttons - whenever a seat is selected, and toggleSeat becomes true, all button would apply the style of bg-success:

// Using the second group as an example, 
// they all rely on the same toggleSeat for className.
<div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={103} onClick={seatCountHandler}>103</button></div>
<div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={104} onClick={seatCountHandler}>104</button></div>
<div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={105} onClick={seatCountHandler}>105</button></div>

And you have multiple methods to fix this, you can of course turn select state into an Object, or change toggleSeat state into an array.

But I'd provide another one for you.

---

You can use Set() to your advantage (explanation in codes):

// ...other useState()
const [toggleSeats, setToggleSeats] = useState(new Set());

const seatCountHandler=(e)=>{
    e.preventDefault();
    
    // Convert the value to a number (optional).
    let numberChagned = Number(e.target.value);
    // Check if the Set() has the number,
    if (!toggleSeats.has(numberChanged)) {
        setToggleSeats(prev => new Set(prev.add(numberChanged));
        setSeatCount(prev => prev - 1);
    } else {
        setToggleSeats(prev => {
            prev.delete(numberChanged);
            return new Set(prev);
        };
        setSeatCount(prev => prev + 1);
    }
}

// ...other functions

return (
    // ...other parts of jsx
    // Check for specific values in the Set for each button.
    <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeats.has(103) ? "bg-success" : ""}`} value={103} onClick={seatCountHandler}>103</button></div>
    <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeats.has(104) ? "bg-success" : ""}`} value={104} onClick={seatCountHandler}>104</button></div>
    <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeats.has(105) ? "bg-success" : ""}`} value={105} onClick={seatCountHandler}>105</button></div>
}

---

Be careful that this problem also happened for you in setSelect() - currently it would only store one value;

And by using Set() you could combine select state with toggleSeat state but not using Object or array:

const [selected, setSelected] = useState(new Set());
// remove the below one, and then apply the rest in the above codeblock:
// const [toggleSeat,setToggleSeat] = useState(false);

// ...other codes