React: Passing Props to Components as Items in Object-CodePudding

I have something like:

const subMenus = {
  "Browse Listings": <MenuSubBrowse />,
  "ShowCase": <MenuShowCase />,
  "Something Else" : <DummyComponent/>

};

And would like to pass props to these components such that they render using a

{subMenus[n.name]}

inline.

Obviously I could pass parameters to subMenus and use props that way, But I'd like to avoid this.

My submenu components look roughly like:

const DummyComponent = ({ text }) => {
    return <>I am a placeholder component from {text}</>;
  };

How would one pass a prop this way? I can't structure it changing the use of the HTML '<' and '/>'; Specifically set the text prop when called in this way

CodePudding user response：

You can define a new component and pass props to it

const MenuComponent = subMenus[n.name];
<MenuComponent text='text' />