I have used for loop and given its value in the click function so I can get the seat number when the seat is clicked but I only get the last number of for loop on every seat click. can anyone tell me how to get the seat number of each seat? API Data is

    var seats = [
    { name: "Premium", seattotal: "15", cost: "250", id: "1" },
    { name: "Club", seattotal: "30", cost: "150", id: "2" },
    { name: "Diamond", seattotal: "25", cost: "170", id: "3" },
    { name: "Gold", seattotal: "20", cost: "170", id: "4" },
    ];

    function handleClick(seatnumber, seatamount, seatname) {
    alert(seatnumber   " "   count   " "   seatamount   " "   
    seatname);
    setIsActive((oldArray) => [...oldArray, seatnumber]);
    setAmount((oldamt) => parseFloat(oldamt)   parseFloat(seatamount));
    if (selectseat.includes(seatname) === false) {
      setSelectSeat((oldArray) => [...oldArray, seatname]);
    }
    console.log(isActive   " "   selectseat);
    }

    function seat(totalseat, seatcost, seatname) {
    var seats = [];
    for (var i = 1; i <= totalseat; i  ) {
      seats.push(
        i % 5 ? (
          <TouchableOpacity
            key={i}
            style={isActive == i ? styles.activeseat : styles.seat}
            onPress={(event) => handleClick(i, seatcost, seatname)}
          >
            <Text style={{ fontSize: 10 }}>{i}</Text>
          </TouchableOpacity>
        ) : (
          <TouchableOpacity
            key={i}
            style={
              isActive == i
                ? { ...styles.activeseat, marginRight: 30 }
                : { ...styles.seat, marginRight: 30 }
            }
            onPress={(event) => handleClick(i, seatcost, seatname)}
          >
            <Text style={{ fontSize: 10 }}>{i}</Text>
          </TouchableOpacity>
        )
      );
    }
    totalseat != 0
      ? seats.push(
          <View
            key={i}
            style={{ backgroundColor: "white", height: 20, width: 
    "100%" }}
          ></View>
        )
      : "";
    
    return seats;

    }
    const allseatui = Object.keys(seats).map((key) => {
    const varseat = seat(
      seats[key].seattotal,
      seats[key].cost,
      seats[key].name
    );
    if (seats[key].name != undefined) {
      return (
        <View key={seats[key].id}>
          <Text style={{ margin: 12, fontSize: 14, color: "grey" }}>
            {seats[key].name} Rs {seats[key].cost}
          </Text>
          <View
            style={{
              flexDirection: "row",
              flexWrap: "wrap",
            }}
          >
            {varseat}
          </View>
        </View>
      );
    }
    });

CodePudding user response：

Issue

i is declared as var and gets mutated during the for-loop when populating the seats array. Because it's a conventional for-loop there's only the single i variable reference in scope that each onPress handleClick callback hander is accessing. On the final iteration i is incremeneted once more and since it is now strictly greater than totalseat the loop is exited. In other words, when totalseat equals "20" and the exit condition is i <= 20 there will be 20 iterations and i will equal 21 when exiting.

Solution

Use the Array.prototype.map function to map an array of length totalseat to the JSX you want to save into the seats array. The .map callback will receive its own copy of the currently mapped index value.

const seats = Array(totalseat).fill().map((_, i) => (
  <TouchableOpacity
    key={i}
    style={
      ...isActive === (i   1) ? styles.activeSeat : styles.seat,
      ...(i   1) % 5 ? {} : { marginRight: '30' }
    }
    style={isActive == i ? styles.activeseat : styles.seat}
    onPress={() => handleClick(i   1, seatcost, seatname)}
  >
    <Text style={{ fontSize: 10 }}>{i   1}</Text>
  </TouchableOpacity>
));

if (totalseat) { // any non-zero value is truthy
  seats.push(
    <View
      key={totalseat   1}
      style={{ backgroundColor: "white", height: 20, width: 
"100%" }}
    />
  );
}

return seats;