Toggle issue in React Js using Hooks

Question

I am trying to implement toggle functionality, by using this functionality user can select desired single preference, and also the user can select all preferences by using the "Select All" button. I have implemented the code that is supporting a single selection I want to make select all functionality.

This is how i am handling toggle

const toggleItem = useCallback((isToggled, value) => {
    if (isToggled) {
        setToggledItems((prevState) => [...prevState, value]);
    } else {
        setToggledItems((prevState) => [...prevState.filter((item) => item !== value)]);
    }
}, []);

const [toggledItems, setToggledItems] = useState([]);

var eventsnfo = [
    {
        icon: '',
        title: 'select All',
        subTitle: '',
    },
    {
        icon: 'event1',
        title: 'event1',
        subTitle: 'event1desc',
    },
    {
        icon: 'event2',
        title: 'event2',
        subTitle: 'event2desc',
    },
    {
        icon: 'event3',
        title: 'event3',
        subTitle: 'event3desc',
    },
    {
        icon: 'event4',
        title: 'event4',
        subTitle: 'event4desc',
    },
];

this is how i am loading all toggle sections

<div>
    {eventsnfo?.map(({ icon, title, subTitle }, index) => {
        return (
            <>
                <div key={index} className='events__firstSection'>
                    <div className='events__agreeToAllContainer'>
                        {icon && (
                            <Icon name={icon} className='events__noticeIcon' isForceDarkMode />
                        )}
                        <div className={icon ? 'events__text' : 'events__text events__leftAlign '}>
                            {title}
                        </div>
                    </div>
                    <Toggle
                        containerClass='events__toggle'
                        checked={toggledItems.includes(title)}
                        onToggle={(isToggled) => toggleItem(isToggled, title)}
                    />
                </div>
                {subTitle && <div className='events__description'>{subTitle}</div>}
                <div className={index !== eventsnfo.length - 1 && 'events__divider'}></div>
            </>
        );
    })}
</div>;

Priyank Kachhela · Accepted Answer · 2021-04-29 09:35:40Z

2

I think you can toggle all by changing your toggleItem function

  const toggleItem = (isToggled, value) => {
    let items = [...toggledItems];
    if (isToggled) {
      items =
        value === "select All"
          ? eventsnfo?.map((events) => events.title)
          : [...items, value];
      if (items?.length === eventsnfo?.length - 1) {
        items.push("select All");
      }
    } else {
      items =
        value === "select All"
          ? []
          : [...items.filter((item) => item !== value && item !== "select All")];
    }
    setToggledItems(items);
  };

Working Demo

edited Apr 29, 2021 at 9:35

answered Apr 29, 2021 at 7:35

Priyank Kachhela

2,64511 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

rajiv ks2 Over a year ago

when the user deselects one preference from the list how to toggled off for the 'select All' button.

Priyank Kachhela Over a year ago

I have updated my answer to toggle 'select All' button if any one preference is deselected

rajiv ks2 Over a year ago

it's deselecting all items along with 'select All'. it should deselect only selected item and 'select All' only toggle buttons

Priyank Kachhela Over a year ago

I have further simplified function and updated answer and also attacked demo for reference.

rajiv ks2 Over a year ago

the snippet is working fine on your demo I don't understand why it's not working on my source code.

|

Collectives™ on Stack Overflow

Toggle issue in React Js using Hooks

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related