How to create a multi-select functionality in the next.js

In this article, We will cover How to Multi-select/Select all Functionality on Next.JS

first, create a new state for the Selected material

 const [selectedMaterials, setSelectedMaterials] = useState(new Set());

Then create a function for Multi-select/Select all

 const handleSelectAll = (event) => {
    const { checked } = event.target;
    const newSelectedMaterials = new Set(selectedMaterials);
  
    if (checked) {
      // If "Select All" checkbox is checked, add all materials to selectedMaterials
      materials.forEach((material) => {
        newSelectedMaterials.add(material);
      });
    } else {
      // If "Select All" checkbox is unchecked, clear selectedMaterials
      newSelectedMaterials.clear();
    }
    setSelectedMaterials(newSelectedMaterials);
  }