how can i expand a menu or close an arraymap?

I have created a sample code base, I am not sure you are looking for a similar kind of use case. Initially, All the status will be collapsed, you can click on the display id to see the change of status.

export default function App() {
  const values = [{ id: 1000 }, { id: 1001 }, { id: 1003 }, { id: 1004 }];
  const [expandedId, setExpandedId] = useState();

  return (
    <div className="App">
      {values.map((val) => (
        <div onClick={() => setExpandedId(expandedId !== val.id ? val.id: "" )}>
          {val.id} -- {expandedId === val.id ? "Expanded" : "Collapsed"}
        </div>
      ))}
    </div>
  );
}

Working Demo – https://codesandbox.io/s/bold-antonelli-mr7fc?file=/src/App.js:65-456

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top