rendering a component inside a react page using Menu

Question

I have a menu and the main body of the page. I have created different pages as components with some text. All I want is that when I click on the side bar menu, the components are displayed in the main page. How can I make this work?

const items2 =  [{
  label: 'Rice',
  key: 'rice',
},
{
  label: 'AB Test',
  key: 'ab', 
}]

const MainLayout = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

const navigate = useNavigate();
const onClick = (e)=>{navigate(`/${e.key}`)}

  return (
    <Layout>
         <Sider >
            <Menu
              mode="inline"
              items={items2}
              onClick = {onClick}

            />
          </Sider>
          <Content >

//I Want to open the pages here

          </Content>
        </Layout>
      </Content>

Answer 1

To render a component inside other component, React provides a special props name children.

To achieve your requirement, you can do like this:

MainLayout.js:

export const MainLayout = ({children}) => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const navigate = useNavigate();
  const onClick = (e)=>{navigate(`/${e.key}`)}

  return (
    <Layout>
      <Sider>
        <Menu
          mode="inline"
          items={items2}
          onClick={onClick}
        />
      </Sider>
      <Content>
        {children}
      </Content>
    </Layout>
  )
}

In MainLayout.js, you only need to write {children} inside component <Content>, React will do the rest for you to pass the content of Rice or AB or whatever for you. In each page, just place <MainLayout> at the top of the outer of rest of your code.

Please see 2 example files below.

---

Rice.js:

import MainLayout from './MainLayout';

export const Rice = () => {
  // Do some stuffs here...

  return (
    <MainLayout>
      <div>
        <h2>Best rated rice in the World</h2>
        <ol>
          <li>Pinipig</li>
          <li>Riz de Camargue</li>
          ...
        </ol>
      <div>
    </MainLayout>
  )
}

---

Corn.js:

import MainLayout from './MainLayout';

export const Corn = () => {
  // Do some stuffs here...

  return (
    <MainLayout>
      <div>
        <h2>Best Corn Side Dish Recipes</h2>
        <ol>
          <li>Whipped-Cream Corn Salad</li>
          <li>Classic Grilled Corn on the Cob</li>
          ...
        </ol>
      <div>
    </MainLayout>
  )
}

You can read more and play around with the example code from React's official documents.

It is the basic concept of React, so before you start to build something big, I suggest to follow this docs first or find some series of React tutorials for beginner, they will explain key concepts of React so you would not save more time.