Manage the selection of multiple items when clicking on and off a button or component

Question

Manage the selection of multiple items when clicking on and off a button or component

I am currently working on implementing a feature with multi-select buttons using a custom component. My goal is to require that at least one option is selected at all times. This means that users can select multiple options, but the last remaining option cannot be deselected without showing an error message indicating that at least one selection is required.

For example, if multiple options are selected, there should be no error displayed:

https://i.sstatic.net/vQ3YV.png

However, if there is only one option selected and the user tries to deselect it, an error message should be shown like this:

https://i.sstatic.net/UjTJB.png

In such cases, a message should appear below stating,

"Atleast one should be selected.."

https://codesandbox.io/s/pedantic-haze-7f214

This sandbox link showcases my current progress towards achieving this functionality. I am also utilizing ReduxForm and building a custom field component with custom validation.

javascript css reactjs ecmascript-6

Answer 1

Answer №1

Code for Component

import React, { useState } from "react";
import "./styles.css";
import { Avatar } from "antd";
const daysOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

export default function App() {
  const [selectedDays, setSelectedDays] = useState({});
  const [error, setError] = useState();
  
  const handleSelect = (day) => {
    if(error) {
      setError(null);
    }
    
    const newSelectedDays = { ...selectedDays, [day]: !selectedDays[day] };
    if(!Object.values(newSelectedDays).find(x => x)) {
      setError('At least one day should be selected..')
      return;
    }
    
    setSelectedDays(newSelectedDays);
  };
  
  return (
    <div className="App">
      {daysOfTheWeek.map((day) => (
        <Avatar
          onClick={() => handleSelect(day)}
          className={`week-day ${selectedDays[day] ? "selected-day" : ""}`}
          key={day}
        >
          {day}
        </Avatar>
      ))}
      {error}
    </div>
  );
}

CSS Styles

.App {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  text-align: center;
}
.week-day {
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 50%;
  padding: 1rem 1.1rem;
  width: 1rem;
  margin: 0.2rem;
  margin-top: 3rem;
  color: black;
}

.selected-day {
  background: magenta;
  color: white;
}

Answer 2

Code for Component

import React, { useState } from "react";
import "./styles.css";
import { Avatar } from "antd";
const daysOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

export default function App() {
  const [selectedDays, setSelectedDays] = useState({});
  const [error, setError] = useState();
  
  const handleSelect = (day) => {
    if(error) {
      setError(null);
    }
    
    const newSelectedDays = { ...selectedDays, [day]: !selectedDays[day] };
    if(!Object.values(newSelectedDays).find(x => x)) {
      setError('At least one day should be selected..')
      return;
    }
    
    setSelectedDays(newSelectedDays);
  };
  
  return (
    <div className="App">
      {daysOfTheWeek.map((day) => (
        <Avatar
          onClick={() => handleSelect(day)}
          className={`week-day ${selectedDays[day] ? "selected-day" : ""}`}
          key={day}
        >
          {day}
        </Avatar>
      ))}
      {error}
    </div>
  );
}

CSS Styles

.App {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  text-align: center;
}
.week-day {
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 50%;
  padding: 1rem 1.1rem;
  width: 1rem;
  margin: 0.2rem;
  margin-top: 3rem;
  color: black;
}

.selected-day {
  background: magenta;
  color: white;
}

Manage the selection of multiple items when clicking on and off a button or component

Answer №1

Similar questions

A step-by-step guide on displaying a loading spinner during the retrieval and assembly of a component framework (Astro Island) with Vue and AstroJS

Display a unique popover component in React when clicking on the menu

Alert: Jade has detected an unforeseen block called "scripts"

Organizing numerical values within for loops

Incorporating a static image file into a Material UI cardMedia component within a Next.js project

Navigation bar with dropdown functionality that adjusts its width based on the content inside

JQuery receives an enchanting response from the magic line

Calculate the total number of randomly generated integers using jQuery

The issue at hand is that the Mongo Atlas model is in place, but for some reason,

Confirm that the CSS syntax is valid

Enhancing the Appearance of MUI Date Calendar

What is the best way to execute a JavaScript function using Python Selenium?

Creating a jQuery AJAX data object that contains numerous values for a single key

Newbie in JavaScript seeking help with JSON indexing: What could be causing my script using (for ... in) to fail?

Utilize Material UI Slider to show only the minimum and maximum markLabels on display

Perform a jQuery computation using a CSS style

Avoid including package-lock.json file in GitHub contribution history

Creating custom components to encapsulate material-ui functionality

Error message for Joi when validating a nested array of objects

Navigating a single page application with the convenience of the back button using AJAX