Display dynamic content on click on menu item using semantic-ui-react - semantic-ui

Question

I want to display dynamic content in Sidebar.Pusher based on the item clicked from the menu. Here is my code -
<Sidebar.Pushable >
<Sidebar as={Menu} animation='push' width='thin' visible={visible} icon='labeled' vertical inverted>
<Menu.Item name='home' >
<Icon name='tasks' />
Manage categories
</Menu.Item>
<Menu.Item name='home' >
<Icon name='tasks' />
Manage products
</Menu.Item>
</Sidebar>
<Sidebar.Pusher >
<Segment basic>
Display Dynamic content
</Segment>
</Sidebar.Pusher>
Any leads will be highly appreciated.

Answer 1

If I understand the question correctly, there are a few possible solutions. In one of my projects I'm using it with React Router, so in the <Sidebar /> component I have <Menu.Item as={Link} to='/path' /> and then the <Route path='/path' /> is in a <Switch /> statement in <Sidebar.Pusher />.
If you want to change rendered components without React Router, here is an example of how I implemented it.
import React, { Component } from 'react'
import { Sidebar, Segment, Menu } from 'semantic-ui-react'
export default class SideNav extends Component {
constructor(props) {
super(props)
this.state = {
renderTab: 'home'
}
}
changeTab(tabName) {
this.setState({ renderTab: tabName })
}
render() {
const { renderTab } = this.state
return (
<Sidebar.Pushable as={Segment}>
<Sidebar as={Menu} visible vertical>
<Menu.Item onClick={() => this.changeTab('home')} as='a' name='home'>
Home
</Menu.Item>
<Menu.Item onClick={() => this.changeTab('about')} as='a' name='about'>
About
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
<RenderedContent tabName={renderTab} />
</Sidebar.Pusher>
</Sidebar.Pushable>
)
}
}
const RenderedContent = ({ tabName }) => {
if (tabName === 'home') {
return <Home />
}
if (tabName === 'about') {
return <About />
}
}
const Home = () => (
<div>This is the home page</div>
)
const About = () => (
<div>This is the about page</div>
)