Passing a component with props to another component as prop

Question

I'm trying to pass a component with props to another component as prop. I mean, something like this:

const App = ({ routes, graphqlProvider, themeProvider }) => {
  const GraphqlProvider = graphqlProvider
  const ThemeProvider = themeProvider

  return (
      <GraphqlProvider>
        <ThemeProvider>
          <BrowserRouter basename="/app">
            {renderRoutes(routes)}
          </BrowserRouter>
        </ThemeProvider>
      </GraphqlProvider>
  )
}

const MyApp = () => {
  const mockedProvider = <MockedProvider mocks={mocks} addTypename={false} />

  return (
    <App routes={routes} themeProvider={ThemeProvider} graphqlProvider={mockedProvider} />    
  )
}

In the example above I'd like to pass the component MockedProvider (and its props) to another component (App) as a prop. I've succeeded passing components without props, however, the same approach isn't working when the component has props.

Every time I try to do that I get the following error message:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Please see https://stackoverflow.com/questions/25797048/how-to-pass-in-a-react-component-into-another-react-component-to-transclude-the/37982338 — Alexander, Jan 16 '20 at 15:23
@Andy I removed imports and other declarations to make it simple. — Ricardo Montuan, Jan 16 '20 at 15:30
I haven't seen this pattern before i.e. passing component X into component Y as a prop. Why not just import component X into component Y's file and use it there instead? — Yorkshireman, Jan 17 '20 at 11:08

score 0 · Accepted Answer · answered Jan 16 '20 at 16:26

0

In my mind is kind of a strange pattern. I would probably do something like this, to pass everything in as child elements:

return (
  <App routes={routes}>
    <MockedProvider mocks={mocks} addTypename={false} />
      <ThemeProvider>
         <BrowserRouter basename="/app">
            {renderRoutes(routes)}
          </BrowserRouter>
      </ThemeProvider>
    </MockedProvider>
  </App>
)

answered Jan 16 '20 at 16:26

Fredric Fohlin

114
3

The problem is when I need to write tests, because when I'm running the application I'll use GraphqlProvider, however, when I'm writing tests I'll use the MockedProvider (and they have different props). Does it make sense? – Ricardo Montuan Jan 16 '20 at 17:10

Passing a component with props to another component as prop

1 Answers1