reactjs - How to change Content based on Menu Item click in AntD (React UI Library)

Reactjs - How to change Content based on Menu Item click in AntD (React UI Library)

To change content based on a menu item click using Ant Design (AntD) in a React application, you can follow these steps:

  1. Set up your React environment with Ant Design: Ensure you have React and Ant Design installed. If not, you can install them using npm or yarn:

    npm install antd

    or

    yarn add antd

  2. Import the necessary Ant Design components: Import the Menu and Layout components from Ant Design.

  3. Create the Menu and Content components: Define the Menu items and the corresponding content that should be displayed when each item is clicked.

  4. Handle state to manage which content is displayed: Use React's state management to track the currently selected menu item and display the appropriate content based on the selection.

Here is a complete example:

Complete Example

import React, { useState } from 'react'; import { Layout, Menu } from 'antd'; const { Header, Content, Sider } = Layout; const App = () => { const [selectedKey, setSelectedKey] = useState('1'); const handleMenuClick = (e) => { setSelectedKey(e.key); }; const renderContent = () => { switch (selectedKey) { case '1': return <div>Content for Menu Item 1</div>; case '2': return <div>Content for Menu Item 2</div>; case '3': return <div>Content for Menu Item 3</div>; default: return <div>Select a menu item</div>; } }; return ( <Layout style={{ minHeight: '100vh' }}> <Sider> <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} onClick={handleMenuClick}> <Menu.Item key="1"> Menu Item 1 </Menu.Item> <Menu.Item key="2"> Menu Item 2 </Menu.Item> <Menu.Item key="3"> Menu Item 3 </Menu.Item> </Menu> </Sider> <Layout> <Header style={{ background: '#fff', padding: 0 }}> <h1>Ant Design Menu Example</h1> </Header> <Content style={{ margin: '16px' }}> <div style={{ padding: 24, background: '#fff', minHeight: 360 }}> {renderContent()} </div> </Content> </Layout> </Layout> ); }; export default App;

Explanation

  1. State Management:

    • The selectedKey state is used to keep track of the currently selected menu item. This state is updated whenever a menu item is clicked.

  2. Menu Component:

    • The Menu component from Ant Design is used to create the menu.
    • The onClick event handler updates the selectedKey state whenever a menu item is clicked.

  3. Content Rendering:

    • The renderContent function returns different content based on the value of selectedKey.
    • This function is called within the Content component to display the appropriate content.

  4. Layout:

    • The Layout component from Ant Design is used to structure the application with a sidebar (Sider) for the menu and a main content area (Content).

Running the Example

  • Ensure you have a React environment set up. You can create one using create-react-app if you don't have one already:

    npx create-react-app my-app cd my-app

  • Replace the content of src/App.js with the code provided above.

  • Install Ant Design:

    npm install antd

  • Start your React application:

    npm start

You should see a layout with a sidebar menu. Clicking on different menu items will change the content displayed in the main area accordingly.

Examples

  1. AntD Menu item click change content React

    • Description: Implementing a basic setup to change content based on menu item click using Ant Design in React.
    • Code Implementation:
      import React, { useState } from 'react'; import { Menu } from 'antd'; const App = () => { const [currentMenu, setCurrentMenu] = useState('home'); const handleClick = (e) => { setCurrentMenu(e.key); }; return ( <div> <Menu onClick={handleClick} selectedKeys={[currentMenu]} mode="horizontal"> <Menu.Item key="home">Home</Menu.Item> <Menu.Item key="about">About</Menu.Item> <Menu.Item key="contact">Contact</Menu.Item> </Menu> <div style={{ padding: '20px' }}> {currentMenu === 'home' && <h1>Home Content</h1>} {currentMenu === 'about' && <h1>About Content</h1>} {currentMenu === 'contact' && <h1>Contact Content</h1>} </div> </div> ); }; export default App;

  2. AntD Menu routing change content React

    • Description: Using React Router with Ant Design to change content based on menu item click.
    • Code Implementation:
      import React from 'react'; import { Menu } from 'antd'; import { Link, Route, Switch } from 'react-router-dom'; const App = () => { return ( <div> <Menu mode="horizontal"> <Menu.Item key="home"> <Link to="/home">Home</Link> </Menu.Item> <Menu.Item key="about"> <Link to="/about">About</Link> </Menu.Item> <Menu.Item key="contact"> <Link to="/contact">Contact</Link> </Menu.Item> </Menu> <Switch> <Route path="/home"><h1>Home Content</h1></Route> <Route path="/about"><h1>About Content</h1></Route> <Route path="/contact"><h1>Contact Content</h1></Route> </Switch> </div> ); }; export default App;

  3. AntD Menu collapse expand content React

    • Description: Creating a collapsible menu to expand content based on menu item click using Ant Design in React.
    • Code Implementation:
      import React, { useState } from 'react'; import { Menu } from 'antd'; const App = () => { const [collapsed, setCollapsed] = useState(false); const toggleCollapsed = () => { setCollapsed(!collapsed); }; return ( <div style={{ width: 256 }}> <Menu defaultSelectedKeys={['1']} mode="inline" inlineCollapsed={collapsed} > <Menu.Item key="1">Home</Menu.Item> <Menu.Item key="2">About</Menu.Item> <Menu.Item key="3">Contact</Menu.Item> </Menu> <div style={{ padding: '20px' }}> {collapsed ? <h1>Collapsed Content</h1> : <h1>Expanded Content</h1>} </div> </div> ); }; export default App;

  4. AntD Menu tabs change content React

    • Description: Using Ant Design Tabs component to switch content based on tab selection in React.
    • Code Implementation:
      import React from 'react'; import { Tabs } from 'antd'; const { TabPane } = Tabs; const App = () => { const handleTabChange = (key) => { console.log(key); // Handle tab change logic here }; return ( <Tabs defaultActiveKey="1" onChange={handleTabChange}> <TabPane tab="Home" key="1"> <h1>Home Content</h1> </TabPane> <TabPane tab="About" key="2"> <h1>About Content</h1> </TabPane> <TabPane tab="Contact" key="3"> <h1>Contact Content</h1> </TabPane> </Tabs> ); }; export default App;

  5. AntD Menu accordion change content React

    • Description: Using Ant Design Accordion component to expand content based on accordion item click in React.
    • Code Implementation:
      import React from 'react'; import { Collapse } from 'antd'; const { Panel } = Collapse; const App = () => { const handlePanelChange = (key) => { console.log(key); // Handle panel change logic here }; return ( <Collapse accordion onChange={handlePanelChange}> <Panel header="Home" key="1"> <h1>Home Content</h1> </Panel> <Panel header="About" key="2"> <h1>About Content</h1> </Panel> <Panel header="Contact" key="3"> <h1>Contact Content</h1> </Panel> </Collapse> ); }; export default App;

  6. AntD Menu dropdown change content React

    • Description: Using Ant Design Dropdown component to change content based on dropdown item click in React.
    • Code Implementation:
      import React from 'react'; import { Menu, Dropdown, Button } from 'antd'; const App = () => { const handleMenuClick = (e) => { console.log(e.key); // Handle menu item click logic here }; const menu = ( <Menu onClick={handleMenuClick}> <Menu.Item key="1">Home</Menu.Item> <Menu.Item key="2">About</Menu.Item> <Menu.Item key="3">Contact</Menu.Item> </Menu> ); return ( <Dropdown overlay={menu}> <Button>Dropdown</Button> </Dropdown> ); }; export default App;

  7. AntD Menu tree change content React

    • Description: Using Ant Design Tree component to change content based on tree node selection in React.
    • Code Implementation:
      import React from 'react'; import { Tree } from 'antd'; const { TreeNode } = Tree; const App = () => { const handleTreeSelect = (selectedKeys, info) => { console.log(selectedKeys); // Handle tree node selection logic here }; return ( <Tree onSelect={handleTreeSelect}> <TreeNode title="Home" key="1"> <h1>Home Content</h1> </TreeNode> <TreeNode title="About" key="2"> <h1>About Content</h1> </TreeNode> <TreeNode title="Contact" key="3"> <h1>Contact Content</h1> </TreeNode> </Tree> ); }; export default App;

  8. AntD Menu sidebar change content React

    • Description: Implementing a sidebar menu using Ant Design in React to change content based on menu item click.
    • Code Implementation:
      import React from 'react'; import { Layout, Menu } from 'antd'; const { Sider, Content } = Layout; const App = () => { const handleMenuClick = (e) => { console.log(e.key); // Handle menu item click logic here }; return ( <Layout> <Sider> <Menu onClick={handleMenuClick} mode="inline"> <Menu.Item key="home">Home</Menu.Item> <Menu.Item key="about">About</Menu.Item> <Menu.Item key="contact">Contact</Menu.Item> </Menu> </Sider> <Layout> <Content> {contentMap[currentMenu]} </Content> </Layout> </Layout> ); }; export default App;

More Tags

scrollwheel coordinates knex.js reboot technical-indicator savefig concatenation pandoc xss top-n

More Programming Questions

More Weather Calculators

More Geometry Calculators

More Auto Calculators

More Fitness Calculators