I have used [an open current submenu of antd][1], so I have a menu Team, which has a SubMenu an alphabetic character which having themselves the name of the doctors, and each name of the doctors has a submenu is like this: [![!\[enter image description here][2]][2] My code codeSandbox is : https://codesandbox.io/s/exciting-wescoff-eqot3 import React, { Component } from "react"; import { Route, Switch, HashRouter } from "react-router-dom"; import { Layout, Menu, Button as ButtonA } from "antd"; import { Link } from "react-router-dom"; import "antd/dist/antd.css"; // Pour le layout const { Header, Content, Footer, Sider } = Layout; // SubMenu de Menu const { SubMenu } = Menu; export default class App extends React.Component { constructor(props) { super(props); this.state = { praticiens: [ { id: 1, identifiant_user: "125884", nom_user: "Anna" }, { id: 2, identifiant_user: "987456", nom_user: "Daniel" }, { id: 3, identifiant_user: "1478889", nom_user: "Oth" } ], rootSubmenuKeys: [], openKeys: ["A", "D", "I", "O"] }; } onOpenChange = openKeys => { const group = this.state.praticiens .sort((a, b) => a.nom_user.localeCompare(b.nom_user)) .reduce((r, e) => { const key = e.nom_user[0]; if (!r[key]) r[key] = []; r[key].push(e); return r; }, {}); const latestOpenKey = openKeys.find( key => this.state.openKeys.indexOf(key) === -1 ); Object.entries(group).map(([key, value], i) => { this.state.rootSubmenuKeys.push(key); this.setState({ rootSubmenuKeys: this.state.rootSubmenuKeys }, () => { if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) { this.setState({ openKeys }); } else { this.setState({ openKeys: latestOpenKey ? [latestOpenKey] : [] }); } }); }); }; render() { const group = this.state.praticiens .sort((a, b) => a.nom_user.localeCompare(b.nom_user)) .reduce((r, e) => { const key = e.nom_user[0]; if (!r[key]) r[key] = []; r[key].push(e); return r; }, {}); return (

Log

{Object.entries(group).map(([key, value], i) => { return ( {value.map((item, j) => ( Gestion des plannings Disponibilité graphique Gestion des activités ))} ); })} Gestion des consignes

content

); } } My idea is when I click, for example, when the subMenu `A` is active and I click the SubMenu of `D`, the submenu of `A` will be collapsed, and the Menu team will be collapsed each click on any submenu. I want when I click on the submenu, for example `A`, the current submenu will be collapsed, and the menu Team rest opened, it rests on the same situation. How can I fix it? [1]: https://codesandbox.io/s/uodx3 [2]: https://i.stack.imgur.com/KZyA7.png

How can I make the menu opened when opening the current submenu only with antd and reactjs? #22067

Company

Community

Support

Connect