0

I am trying to pass a prop to my child component using the render method in my <Route> in react-router 4. Saw this answer which mentioned passing props in your <Route>s over {React.cloneElement(this.props.children, { key: value })} used in react-router 3. How would I pass a prop defined in the componentWillMount lifecycle? Specifically, I want to use the EventEmitter object.

Here is the problematic <Route>s in Index.js:

<Route path="/screen3" render={ (props) => 
    <Screen3 eventEmitter={ this.eventEmitter } {...props} /> 
} />

Full Index.js:

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { Route, BrowserRouter, Switch, Link } from 'react-router-dom';
import { EventEmitter } from 'events';
import Screen3 from './screens/Screen3';

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
        screenIndex: 1
    }
  }  

  componentWillMount() {
    this.eventEmitter = new EventEmitter()
    this.eventEmitter.addListener("navigateScreen", ({screenIndex}) => {
        this.updateScreen({newScreenIndex: screenIndex})
    })
  }

  updateScreen({newScreenIndex}) {
    this.setState({ screenIndex: newScreenIndex })
  }

  render() {
    return (
        <div className="app">
          <div className="main-content">
            {this.props.children}
          </div>
        </div>
    )
  }
}

ReactDOM.render(
  <BrowserRouter>       
    <App>
        <div>
            <Route path="/screen3" render={ (props) => 
                <Screen3 eventEmitter={ this.eventEmitter } {...props} /> 
            } /> 
        </div>
    </App>
  </BrowserRouter>, 
  document.getElementById('root')
);

In my Screen3.js component:

import React, { Component } from 'react'

class Screen3 extends Component {

  componentWillMount() {
    this.props.eventEmitter.emit("navigateScreen", {screenIndex: 3})
  }

  render() {
    return (
      <div className="screen screen3">
        <h1>SCREEN 3 DATA</h1>
      </div>
    )

  }

}

export default Screen3

The eventEmitter prop is undefined when I do a console.log(this.props.eventEmitter) in my Screen3 component. Any ideas?

atc
  • 27
  • 2
  • 11
  • Include your `index.js`. The `this.eventEmitter` doesn't seem to refer to anything in your route. – Sam R. Jan 08 '18 at 00:37
  • @norbertpy can you clarify what you mean by "Include your Index.js? I am able to access `this.eventEmitter` in the `render()` lifecyle in `Index.js`, just not sure how to use it in the `` – atc Jan 08 '18 at 01:39
  • I think he means the `this.eventEmitter` in `ReactDOM.render` function. What's the `this` is referring to there? – Sam R. Jan 08 '18 at 01:57
  • If you move the `div` and the routes inside of it into the render function of `App` component then `this` will be correctly pointing to `App`. – Sam R. Jan 08 '18 at 02:05
  • thanks @SamRad. just added the full `Index.js`. Is putting all the ``s inside the `render()` function the right pattern vs. putting them in `ReactDOM.render()`? – atc Jan 08 '18 at 02:10
  • That's typical react. Either that or you can use more ceremonial stuff like 'render props' pattern. Just google it. Routes are just react components. Nothing special about them. – Sam R. Jan 08 '18 at 03:32
  • @SamRad gotcha thanks! – atc Jan 08 '18 at 15:18

0 Answers0