Failed prop type: Invalid prop `children` supplied to `ForwardRef(Grid)`

Question

This is just one example of the issue, I am able to create the issue using many elements. When replacing child components of a element what is the correct approach so as not to get Invalid prop children supplied to `ForwardRef?

const dynamicJSX = () => {
  return (
    <div>Working</div>
  )
}

return (
  <Grid container >
    <Grid item >
      {dynamicJSX}
    </Grid>
  </Grid>
)

Answer 1

You should use <dynamicJSX /> instead of passing its reference. This way, you probably want to rename it to <DynamicJSX /> (for convention).

You can also call {dynamicJSX()} if dynamicJSX has more a role of util rendering method rather than a functional component.