score:1

Accepted answer

you are trying to toggle active only which is used by all items. instead use index position to toggle.

i have explained the rest within the code using comments.

app.js

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

const list = [1, 2, 3];
export default function app() {
  const [active, setactive] = usestate();

  return (
    <div>
      {/* you forgot to add ul here */}
      <ul>
        {list.map((item, idx) => {
          return (
            // added key to each child to avoid error. use <react.fragment/> instead of <>
            <react.fragment key={idx}>
              <li
                onclick={() => {
                  // condition for toggling the lists.
                  // if current list is selected
                  if (active === idx) {
                    // change active to blank
                    setactive();
                  } else {
                    // change active to current index
                    setactive(idx);
                  }
                }}
              >
                {item}
              </li>
              <div classname={active === idx ? "info active" : "info"}>
                {" "}
                info {idx + 1}
              </div>
            </react.fragment>
          );
        })}
      </ul>
    </div>
  );
}

edited this css to avoid applying to another tag style.css

.info.active {
  display: flex;
}

you can try the above code on sandbox https://codesandbox.io/s/stackoverflow-qno-65730790-tmeyf

score:1

seems like a good use case for usereducer. it's a really useful tool to keep track of the states of multiple components. in your case you would need to track whether a given li is active (showing information) or not. here is how to do that with usereducer along with a sanbdox

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

const list = [1, 2, 3];
const default_states = list.map((item) => object({ id: item, action: false }));
export default function app() {
  const [li_states, dispatch] = react.usereducer((state, id) => {
    return state.map((item) => {
      if (item.id === id) return { id: item.id, active: !item.active };
      else return item;
    });
  }, default_states);

  return (
    <div>
      {list.map((item) => {
        const cur = li_states.find((s) => s.id === item);
        return (
          <div key={item}>
            <li
              onclick={() => {
                dispatch(item);
              }}
            >
              {item}
            </li>
            <div classname={cur.active ? "action" : "info"}> info {item}</div>
          </div>
        );
      })}
    </div>
  );
}

what's happening here is each time you click any of your lis, the dispatch calls the reducer function inside react.usereducer with the id of the li and toggles the state of the clicked li.

score:1

you can follow this method too

const list = ['start', 'installation', 'text banners', 'image banners'];
const links = ['/start', '/installation', '/textbanners', '/imagebanners'];
  
  const [active, setactive] = usestate(null)
  const toggleactive = (e) => {
    console.log(e)
    setactive(e.target.innertext)
  }
  return (
    <div classname={style.dashboard_container}>
      <div classname={style.dashboard}>
        <ul>
          {list.map((item, index) => {
            return (
              <li classname={active == item ? style.active : ''} key={index} onclick={toggleactive}>{item}</li>
            )
          })}
        </ul>
      </div>
      {children}
    </div>
  );

Related Query

More Query from same tag