如何在 React mui menuItem 中传递组件

Question

I imported Report.js component and want to use it in "menuitem", I tried this in button and its working perfectly

 import Reports from 'new-components/Reports/Reports'   //ontop

 <Button> 
    <Reports pid={pid} />          //working
 </Button>

but when i tried this same in "menuitem" than its not working

<MenuItem >
  <Reports pid={pid} />            //not working
</MenuItem>

i also tried with passing component in onClick function, i know we can only pass function in onClick, but this gives desired result with error

<MenuItem onClick={<Reports pid={name}/>}> 
     <Reports pid={name}/>
</MenuItem>

It throws a error " Uncaught Error: Expected onClick listener to be a function, instead got a value of object type. "

Reports.js

 return ( <CSVLink {...csvReport}>Export CSV</CSVLink> )

Answer 1

You could try to pass your Reports element via the component prop of MenuItem :

const YourComponent = () => {
  return <MenuItem component={<Reports pid={pid} />} />;
}

https://mui.com/material-ui/api/menu-item/#props