dimanche 17 juillet 2022

Checkbox is not working properly with React state

I am building a form where the hotel owners will add a hotel and select a few amenities of the same hotel. The problem is If I use state in the onChange function the checkbox tick is not displayed. I don't know where I made a mistake?

import React from "react";
import { nanoid } from "nanoid";

const ListAmenities = ({
  amenities,
  className,
  setHotelAmenities,
  hotelAmenities,
}) => {
  const handleChange = (e) => {
    const inputValue = e.target.dataset.amenitieName;
    if (hotelAmenities.includes(inputValue) === true) {
      const updatedAmenities = hotelAmenities.filter(
        (amenitie) => amenitie !== inputValue
      );
      setHotelAmenities(updatedAmenities);
    } else {
      //If I remove this second setState then everything works perfectly.
      setHotelAmenities((prevAmenities) => {
        return [...prevAmenities, inputValue];
      });
    }
  };

  return amenities.map((item) => {
    return (
      <div className={className} key={nanoid()}>
        <input
          onChange={handleChange}
          className="mr-2"
          type="checkbox"
          name={item}
          id={item}
          data-amenitie-name={item}
        />
        <label htmlFor={item}>{item}</label>
      </div>
    );
  });
};

export default ListAmenities;



Aucun commentaire:

Enregistrer un commentaire