React: How to render components based on MenuItem clicked? - reactjs

Question

Below is the code:
import React from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, ProfileFilled, CreditCardFilled, SearchOutlined, BankOutlined} from '#ant-design/icons';
const { SubMenu } = Menu;
const { Header, Content, Sider, Footer } = Layout;
function Admin(){
function handleClick(){
console.log("Search")
}
return(
<Layout>
<Header className="header">
<div className="logo" />
<Menu theme="light" mode="horizontal" defaultSelectedKeys={['2']} icon={<UserOutlined />}>
<Menu.Item key="1">Creame Cookies</Menu.Item>
</Menu>
</Header>
<Layout>
<Sider width={200} className="site-layout-background">
<Menu
theme="dark"
mode="inline"
defaultOpenKeys={['Dashboard']}
defaultSelectedKeys={['Dashboard']}
style={{ height: '250%', borderRight: 0, width: 250 }}
>
<Menu.Item key="Dashboard" icon={<UserOutlined />}>
Dashboard
</Menu.Item>
<Menu.Item onClick={handleClick} key="Search" icon={<SearchOutlined />}>
Search
</Menu.Item>
<SubMenu key="Profiles" icon={<ProfileFilled />} title="Profiles">
<Menu.Item key="1">Free Profiles</Menu.Item>
<Menu.Item key="2">Premium Profiles</Menu.Item>
</SubMenu>
<Menu.Item key="Payments" icon={<CreditCardFilled />}>
Payments
</Menu.Item>
</Menu>
</Sider>
<Layout style={{ padding: '0 72px 72px' }}>
<Content
className="site-layout-background"
style={{
padding: 24,
margin: 0,
minHeight: 500,
}}
>
<h1>Default</h1>
</Content>
</Layout>
</Layout>
{/*<Footer style={{ textAlign: 'center' }}>Creame Cookies Ltd</Footer> */}
</Layout>
)
}
export default Admin
Now, I need to render components at the location of the h1 tag with text as Default, based on the menuitem clicked. I am unsure of how to do this in react since I am new to it and feeling it difficult as compared to vannila javascript and jQuery in which I have already worked.

Answer 1

<h1>{someCondition ? 'Text A': 'Text B'}</h1> is generally how you handle this. You can always do the condition at the top of the component before your return statement if you prefer.
{ } is syntax to wrap an expression in React. You could put a ternary or just a variable in there to render.
Could also do <h1>{someCondtion ? <ComponentA /> : <ComponentB />}</h1>.