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>
    </>
  );
};

CodePudding user response：

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>
    </>
  );
};

1. You should work with state in your component, not with constant.
2. You do not need callback in your setSeating.
3. isSelected - name for boolean value. You store id - call it selectedSeatId.
4. Key should be on div, not on button.

CodePudding user response：

seats.map((seat) => (

You're mapping over the original array, not your state variable. Change it to:

seating.map((seat) => (

CodePudding user response：

It looks like the issue is that you are using the seats variable instead of the seating state variable in your map function to render the buttons. seats is never updated, so the buttons are not greyed out even though the isReserved property of the seat objects is being updated.

You should replace seats with seating in your map function like this:

{seating.map((seat) => (

Additionally, you should also update your onSelected function to update the isSelected property of the seat object instead of storing the selected seat id in a separate state:

const onSelected = (select: any) => {

setSeating((seat) => {
  return seat.map((item) => {
    return item.id === select.id
      ? { ...item, isSelected: !item.isSelected }
      : item;
  });
});

};

Then you can use isSelected property of seat object to change the color of selected button.

backgroundColor: seat.isReserved === true ? "grey" : seat.isSelected === true ? "red" : "#2d95c9",