CODEWITHSUNDEEP
reactjs
Waterfall
Waterfall

Reputation: 704

onClick triggering all sub menus instead of only the clicked one

When I click on an item it should expend some sub items. This is working but if I have two, three or four etc. list items then when I click on one it expands ALL of the sub items for all the list items which is obviously not what I want. How can I fix this code to make it only open expand the one I actually clicked on?

const [sideActive, setSideActive] = useState(false);
  const toggleSideActive = () => {
    setSideActive(!sideActive);
  };

html:

        <li>
          <div
            onClick={toggleSideActive}
            className={
              sideActive
                ? `${styles.navList__subheading} row ${styles.row__align_v_center} ${styles.navList__subheading__open}`
                : `${styles.navList__subheading} row ${styles.row__align_v_center}`
            }
          >
            <span className={styles.navList__subheading_icon}>
              <FaBriefcaseMedical />
            </span>
            <span className={styles.navList__subheading_title}>
              insurance
            </span>
          </div>
          <ul
            className={
              sideActive
                ? `${styles.subList}`
                : `${styles.subList} ${styles.subList__hidden}`
            }
          >
            <li className={styles.subList__item}>medical</li>
            <li className={styles.subList__item}>medical</li>
            <li className={styles.subList__item}>medical</li>
          </ul>
        </li>

Upvotes: 0

Views: 331

Answers (1)

Sarun UK
Sarun UK

Reputation: 6736

You can create a local state for tracking the selected id and show the content based on the state. Also, update the selected Id on click of the tab like below.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [selected, setSelected] = useState("");

  const data = [
    {
      id: 1001,
      name: "Tab - 1",
      content: ["test1", "test2"]
    },
    {
      id: 1002,
      name: "Tab - 2",
      content: ["test21", "test22"]
    }
  ];
  return (
    <div className="App">
      <ul class="parent">
        {data.map((v) => (
          <li onClick={() => setSelected(selected !== v.id ? v.id : "")}>
            {v.name}
            {selected === v.id && (
              <ul class="content">
                {v.content.map((val) => (
                  <li>{val}</li>
                ))}
              </ul>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

For the below example, click on the tab to see the content.

Working code - https://codesandbox.io/s/long-leaf-cl4cy?file=/src/App.js:0-759

Let me know if you are facing any issues.

Upvotes: 1

Related Questions