Array object not updating in react?

January 13, 2023

I have an application where the user will select a seat and then will click reserve and the seats will be greyed out. For some reason my object array of seats are not updating in the array and the seats are not greying out. when I log the seating sometimes, the isReserved is true, and when I log it again it goes back to false.

Here is what the code looks like:

const seats: any[] = [
  { id: 1, isSelected: false, isReserved: false },
  { id: 2, isSelected: false, isReserved: false },
  { id: 3, isSelected: false, isReserved: false },
  { id: 4, isSelected: false, isReserved: true },
  { id: 5, isSelected: false, isReserved: false },
  { id: 6, isSelected: false, isReserved: false },
];

const Seatbooking = () => {
  const [isSelected, setIsSelected] = useState(0);
  const [seating, setSeating] = useState(seats);

  function onSelected(select: any) {
    console.log(select.id);
    console.log("selected ", select);
    setIsSelected(select.id);
    console.log("it is selected ", select.id);
  }
  const onReserved = (id: any) => {
    setSeating((seat) => {
      return seat.map((item) => {
        return item.id === id
          ? { ...item, isReserved: !item.isReserved }
          : item;
      });
    });
  };

  return (
    <>
      <div className="grid-container">
        {seats.map((seat) => (
          <div style={{ width: "50%" }}>
            <button
              key={seat.id}
              style={{
                backgroundColor:
                  seat.isReserved === true
                    ? "grey"
                    : seat.id === isSelected
                    ? "red"
                    : "#2d95c9",
              }}
              className="seat_buttons"
              onClick={() => onSelected(seat)}
            >
              {seat.id}
            </button>
          </div>
        ))}
      </div>

      <button className="seat_booking" onClick={() => onReserved(isSelected)}>
        Reserve seat
      </button>
    </>
  );
};

>Solution :

Working solution with fixed naming and optimised conditions.

import { useState } from 'react';

const seats = [
  { id: 1, isSelected: false, isReserved: false },
  { id: 2, isSelected: false, isReserved: false },
  { id: 3, isSelected: false, isReserved: false },
  { id: 4, isSelected: false, isReserved: true },
  { id: 5, isSelected: false, isReserved: false },
  { id: 6, isSelected: false, isReserved: false },
];

export const Seatbooking = () => {
  const [selectedSeatId, setSelectedSeatId] = useState(0);
  const [seating, setSeating] = useState(seats);

  function onSelected(select) {
    console.log(select.id);
    console.log('selected ', select);
    setSelectedSeatId(select.id);
    console.log('it is selected ', select.id);
  }
  const onReserved = (id) => {
    const updatedArr = seating.map((item) => {
      return item.id === id ? { ...item, isReserved: !item.isReserved } : item;
    });
    setSeating(updatedArr);
  };

  return (
    <>
      <div className="grid-container">
        {seating.map((seat) => (
          <div key={seat.id} style={{ width: '50%', display: 'flex' }}>
            <button
              style={{
                backgroundColor: seat.isReserved
                  ? 'grey'
                  : seat.id === selectedSeatId
                  ? 'red'
                  : '#2d95c9',
              }}
              className="seat_buttons"
              onClick={() => onSelected(seat)}
            >
              {seat.id}
            </button>
          </div>
        ))}
      </div>

      <button className="seat_booking" onClick={() => onReserved(selectedSeatId)}>
        Reserve seat
      </button>
    </>
  );
};