0

Similar to react-router - pass props to handler component but in my case my component was declared in a variable in my case elem.component and I am trying to build an array of routes passing a showModal function.

This is what I had tried so far

routes.push(
  <Route key={elem.to} exact path={elem.to}
     component={elem.component} showModal={this.props.showModal}/>)

I was looking at the render methods for the other answers but they have the component defined in the function which I do not have in my case.

Community
  • 1
  • 1
Archimedes Trajano
  • 35,625
  • 19
  • 175
  • 265

2 Answers2

0

Just pass component using function binding

<Route exact path="/" component={() => (<Component prop={val} />) }/>

Amit Sharma
  • 41
  • 2
0

You have to assign component to a capitalized variable to use it in JSX - please check this React docs for more details about defining element type at runtime. Please try this:

<Route key={elem.to} exact path={elem.to}
     render={() => {
        const MyComponent = elem.component;
        return <MyComponent showModal={someValue} />
     }}

/>
Bartek Fryzowicz
  • 6,464
  • 18
  • 27