Search code examples
reactjsreact-propsreact-component

Issue with rendering a component as a prop

I have a layout component which acts as follows:

const Layout = ({ children, sider }) => (
  <div>
    <div>{sider}</div>
    {children}
  </div>
)

But I can't implement it as expected. I'm hoping to get it implemented as follows:

<Layout sider={Sider}>
  Body Content Here
</Layout>

Where Sider is another React component.

However when I do this, my Sider component doesn't render.

I can only get it to work like this:

<Layout sider={<Sider />}>
  Body Content Here
</Layout>

How can I update my Layout component so that I can implement sider={Sider} instead of sider={<Sider />}?

Solution

  • Your 2nd approach is correct however if you still want to do that way, do like this

    const Layout = ({ children, sider: Sider }) => (
  <div>
    <div>
      <Sider />
    </div>
    {children}
  </div>
)