Set Antd's Menu defaultSelectedKeys value using React and Redux - reactjs

Question

I'm using antd for building a react application. I'm using antd's Layout to design the layout. Also, I'm using react-router for routing and redux for state management.
In antd's Menu I've set the defaultSelectedKeys to a blank array so that when page loads I don't want to show the active menu item. Instead, When the user accesses a certain page{Component) using application URL in the browser, then that page's menu item should be active.
For example, by default defaultSelectedKeys array will be blank. So no menu item will be active initially. When the application loads and react-router routes to the home component then the home menu item should be active.
For this, I'm using useEffect hook to dispatch an action with the menu key when a particular component is mounted.
Example Home Component:
import React, { Fragment, useEffect } from "react";
import { useDispatch } from "react-redux";
import { CURRENT_COMPONENT } from "./../reducers/types";
export default function HomeComponent() {
const dispatch = useDispatch();
useEffect(() => {
dispatch({
type: CURRENT_COMPONENT,
payload: { component: "Landing", sideBarMenuKey: "1" }
});
}, [dispatch]);
return (
<Fragment>
<h1>This is a home componet </h1>
<br />
...
<br />
<br />
...
<br />
<br />
...
<br />
</Fragment>
);
}
Up here in the useEffect I'm dispatching an action to the reducer with sideBarMenuKey: "1" and it is dispatching perfectly when this component mounts and able to receive the state change in Layout component as well using the react-redux useSelector hook.
Example Layout Component:
import React, { Fragment } from "react";
import { useSelector } from "react-redux";
import { Layout, Menu, Breadcrumb } from "antd";
import { Switch, Route } from "react-router-dom";
import HomeComponent from "./Home";
import AboutComponent from "./About";
const { Header, Content, Footer } = Layout;
export default function LayoutComponent() {
const sideBarMenuKey = useSelector(
state => state.currentComponetReducer.sideBarMenuItemKey
);
console.log(sideBarMenuKey);
return (
<Fragment>
<Layout className="layout">
<Header>
<div className="logo" />
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={[sideBarMenuKey]}
style={{ lineHeight: "64px" }}
>
<Menu.Item key="1">Home</Menu.Item>
<Menu.Item key="2">About</Menu.Item>
</Menu>
</Header>
<Content style={{ padding: "0 50px" }}>
<Breadcrumb style={{ margin: "16px 0" }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<div style={{ background: "#fff", padding: 24, minHeight: 280 }}>
<Switch>
<Route exact path="/" component={HomeComponent} />
<Route exact path="/about" component={AboutComponent} />
</Switch>
</div>
</Content>
<Footer style={{ textAlign: "center" }}>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
</Fragment>
);
}
Even though I'm receiving the state change in the Layout Component and when I use sideBarMenuKey in antd's Menu prop as defaultSelectedKeys={[sideBarMenuKey]} the menu item doesn't get active state.
Sample Example:
I've created a sample codesandbox example. The link is below
https://codesandbox.io/s/styled-antd-react-starter-ytxko
I've created a Layout, Home and About components. Initially, when you log in it will show Home component. If you want to render the About component, then change the browser URL in the codesandbox to https://url/about. Both in Home and About component I'm dispatching an action with sideBarMenuKey and the state is also getting updated. But the menu item is not getting active.

Answer 1

Changing defaultSelectedKeys to selectedKeys should make it work:
<Menu
theme="dark"
mode="horizontal"
selectedKeys={[sideBarMenuKey]}
style={{ lineHeight: "64px" }}
>
<Menu.Item key="1">Home</Menu.Item>
<Menu.Item key="2">About</Menu.Item>
</Menu>
Putting NavLink inside the Menu.Item will allow you to switch from a nav tab to another.
<Menu
theme="dark"
mode="horizontal"
selectedKeys={[sideBarMenuKey]}
style={{ lineHeight: "64px" }}
>
<Menu.Item key="1">
<NavLink to="/">nav 1</NavLink>
</Menu.Item>
<Menu.Item key="2">
<NavLink to="/about">nav 1</NavLink>
</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
You can see it in action here

Answer 2

const [sideBarMenuKey, setSideBarMenuKey] = useState(1);
<Menu theme="dark" mode="inline" defaultSelectedKeys={[sideBarMenuKey]}>
<Menu.Item key="1" icon={<BirthIcon style={{ paddingRight: '10px' }} />}
onClick={ () => {
setSideBarMenuKey(1)
setShowBirth(true);
}
} >
Birth
</Menu.Item>
<Menu.Item key="2"
icon={<DeathIcon style={{ paddingRight: '10px' }} />}
onClick={ () => {
setSideBarMenuKey(2)
setShowBirth(false)
} }>
Death
</Menu.Item>
</Menu>
Using hooks look on to this