Component not taking prop passed by the prop

Question

i'm having trouble accessing a property value of a property in my component. The thing is that this is like a component anidation. Layout takes CenterUp in its centerUp prop and at the same time CenterUp takes InnerHeader as its header prop. I want to access to the CenterUp header value from the Layout component, so from the Layout scope it supposed to be centerUp.header.

RandomComponents.tsx

export const CenterUp: FC<Headerizable> = () => {
    return (
        <>
            <Grid container>
                <Grid item xs>
                    centerUp
                </Grid>
            </Grid>
        </>
    )
}

export const InnerHeader = () => (
    <Typography> Permanent drawer </Typography>
)

Headerizable.tsx

export interface Headerizable {
    header?: JSX.Element,
    children?: JSX.Element
}

export const Headerizable: FC<Headerizable> = ({ header, children }) => {
    return (
        <>
          {header}
          test1
          {children}
        </>
    )

Layout.tsx

interface Layout { centerUp?: Headerizable }

export const Layout: React.FC<Layout> = ({ centerUp }) => {
    return(
        <Headerizable header={centerUp?.header}>
            {centerUp}
        </Headerizable>
    )
}

App.tsx

const App = () => {
    return (
        <BrowserRouter>
        <Routes>            
              <Route
            path="/"
            element={
              <Layout
                centerUp={
                  <CenterUp header={<InnerHeader />} /> 
                }
              />
            }
         </Routes>
         </BrowserRouter >
    )
};

This is not the actually code, it's only a portion of the code that's not working, for more clarity of the problem. The thing is that I want to access to the centerUp.header property where I've got the InnerHeader component that I passed in App but it not renders the component. The header prop in Headerizable is working fine, I've tried passing the InnerHeader component directly to Headerizable render in Layout and it works, it takes it fine but that's not what I want.

Component not taking prop passed by the prop

0 Answers0