React Toggle open and close using onclick on map function

Question

I have an onClick in map function, if I click onClick it will change state of all map item not that item which I clicked. I am using useState hook.

const [open, setOpen] = useState(true);

{
  FilterAvailable.map((item, id) => {
    return (
      <li className="filterItem">
        <div
          className="filterBtn flex align-center justify-between"
          onClick={() => setOpen(!open)}
        >
          <h2>{item.catogery}</h2>
          <div>
            {open ? (
              <IoIosArrowDown className="downArrow" />
            ) : (
              <IoIosArrowUp className="downArrow" />
            )}
          </div>
        </div>

        {item.options.map(option => {
          return (
            <>
              {open && (
                <ul className="filterOption">
                  <li className="filterOptionitem">
                    <button>{option}</button>
                  </li>
                </ul>
              )}
              {/* <div className="hrLine"></div> */}
            </>
          );
        })}
      </li>
    );
  });
}

I want to open only those item option which click.

You have your onClick function on a button outside the map function. If you want to open an individual item, you must include that onClick inside the button inside the map as well as the index for that item, so if the index of that item matches, it will only open that only. You can have the index as a second argument in the .map function — Alex Yepes
– Alex Yepes, Commented Aug 31, 2021 at 20:35

Shujaat · Accepted Answer · 2021-08-31 21:14:32Z

1

Your state is in the wrong place, you need to break the component and have a open state per filterableItem


const Filters = () => {
  return FilterAvailable.map((item, id) => {
    return <FilterItem item={item} />;
  });
};

const FilterItem = ({ item }) => {
  const [open, setOpen] = useState(true);

  return (
    <li className="filterItem">
      <div
        className="filterBtn flex align-center justify-between"
        onClick={() => setOpen(!open)}
      >
        <h2>{item.catogery}</h2>
        <div>
          {open ? (
            <IoIosArrowDown className="downArrow" />
          ) : (
            <IoIosArrowUp className="downArrow" />
          )}
        </div>
      </div>

      {item.options.map(option => {
        return (
          <>
            {open && (
              <ul className="filterOption">
                <li className="filterOptionitem">
                  <button>{option}</button>
                </li>
              </ul>
            )}
          </>
        );
      })}
    </li>
  );
};

answered Aug 31, 2021 at 21:14

Shujaat

6915 silver badges18 bronze badges

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

1 Comment

Zeeshan Over a year ago

One more problem. I want to get value of option with item category when click on it how can i achive this, kindly guide me.

n1koloza · Accepted Answer · 2021-08-31 20:11:10Z

0

Put the index inside state on onclick , inside map check if state index equals to map index and you are done

answered Aug 31, 2021 at 20:11

n1koloza

1,23510 silver badges13 bronze badges

1 Comment

Zeeshan Over a year ago

Sorry but i didn't get you

coderMatt · Accepted Answer · 2022-05-09 15:00:41Z

0

Consider moving the mapped elements to their own component with props - then you create and set your open and closed state there.

answered May 9, 2022 at 15:00

coderMatt

12 bronze badges

Collectives™ on Stack Overflow

React Toggle open and close using onclick on map function

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related