How can I send and Receive props in this scenario when component being used like this {Compmonent} and not

Question

I'm new to react. I want to receive props from NavItemsLayout but I don't know how

const NavItemsLayout = (props)=>{
  return(
    <div className="nav-items">
      Hellow World
    </div>
  )
}
    
const Navbar = ()=>{
  return(
    <div className="navbar">
      <AppLayout
        NavLayoutComponent={NavItemsLayout} // How to receive props from NavItemsLayout
      />
    </div>
  )
}

Answer 1

you can simply use arrow function to do it

sth like this :

<div className="navbar">
                <AppLayout
                NavLayoutComponent={(props)=> <NavItemsLayout {...props} foo={'bar'} />}
                />
            </div>

or use react without jsx

like this :

<div className="navbar">
                <AppLayout
                NavLayoutComponent={(props)=> React.createElement(NavItemsLayout , {...props,foo: 'bar'}, null)}
                />
            </div>