Toggle issue with multiple section in React Js using Hooks

Question

The toggle is not working when I have two different "Select All" buttons. Current functionality is working "Select all" and single selection. It's not working another "Select all" its is in same list.

<div>
    {othersinfo?.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>;

toggleItem action

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);
  };

Priyank Kachhela · Accepted Answer · 2021-05-03 08:39:32Z

3

You can achieve this functionality by changing your toggleItem function like below.

 const toggleItem = (isToggled, value) => {
    let items = [...toggledItems];
    const subItemArray = titleArray
      ?.filter((events) => events.type === "subItems")
      .map((filteredArray) => filteredArray.title);
    if (isToggled) {
      items =
        value === "select All"
          ? titleArray?.map((events) => events.title)
          : value === "sub select All"
          ? [...subItemArray, ...items]
          : [...items, value];
      if (
        subItemArray.every((val) => items.includes(val)) &&
        !items.includes("sub select All")
      ) {
        items.push("sub select All");
      }
      if (items?.length === titleArray?.length - 1) {
        items.push("select All");
      }
    } else {
      items =
        value === "select All"
          ? []
          : value === "sub select All"
          ? items.filter(
              (el) =>
                !subItemArray.includes(el) &&
                el !== "sub select All" &&
                el !== "select All"
            )
          : [
              ...items.filter((item) => item !== value && item !== "select All")
            ];
      if (
        subItemArray.includes(value) &&
        items.indexOf("sub select All") >= 0
      ) {
        items.splice(items.indexOf("sub select All"), 1);
      }
    }
    setToggledItems(items);
  };

Here is demo

answered May 3, 2021 at 8:39

Priyank Kachhela

2,64511 silver badges17 bronze badges

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

1 Comment

rajiv ks2 Over a year ago

Thanks for the help Priyank Kachhela .

Collectives™ on Stack Overflow

Toggle issue with multiple section in React Js using Hooks

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related