Array object not updating in react? - reactjs

Question

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

Answer 1

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>
</>
);
};
You should work with state in your component, not with constant.
You do not need callback in your setSeating.
isSelected - name for boolean value. You store id - call it selectedSeatId.
Key should be on div, not on button.

Answer 2

seats.map((seat) => (
You're mapping over the original array, not your state variable. Change it to:
seating.map((seat) => (