Reuse a component in other ones in React(AntDesign)?

Question

I'm new to react so apologies for the basic question. I have a header component as below which I want to use in my other components


const { Header, Content, Footer, Sider } = Layout;


const NavHeader = (Components: any) => {
  const [collapsed, setCollapsed] = useState(true);
  
  return (
    
      
        
        
            Content of the page
        
        
          My Footer
        
      
    
  );
};

export default NavHeader;

How can I reuse this code considering my pages should be placed inside the `` part of the header?

Colin Hale · Answer

You will want to pass a prop to the NavHeader component as a React.ReactElement, then you can display that in the content area. Here is a quick codesandbox example: https://codesandbox.io/s/pass-component-as-prop-9s070b?file=/src/NavHeader.tsx:28-226

interface Props {
content:React.ReactElement;
}

const NavHeader: React.FC: = ({content}) => {
  const [collapsed, setCollapsed] = useState(true);
  
  return (
    
      
        
        
            {content}
        
        
          My Footer
        
      
    
  );
};

export default NavHeader;

Then to use the component:

Custom Component} />

Reuse a component in other ones in React(AntDesign)?

1 Answers