React use component with props in a different file

Question

I'm currently creating a timer application in react. I have a dashboard where the user can control the timer and now I want a different window where only the component rendering the time is being displayed so it can captured by recording programs. I've tried the following:

In my app.js

function MasterStopwatch(props) {
    return <span>{props.time}</span>
}
export { App, MasterStopwatch };

I'm passing in the props.time in the app.js

In my index.js

import { App, MasterStopwatch } from './App';

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/master" component={MasterStopwatch} />
  </Router>
  , document.getElementById('root')
);

But when I visit the master route it displays nothing and doesn't show an error in the console.

Any help would be appreciated!

Hi. Your _MasterStopwatch_ component requires *props.time*. Therefore, you have to pass it down. Try to update the fragment of code to: `` — , Jan 14 '17 at 14:17
In this case it won't work 'cause every component deals with those props what they get primary as parameters. Like — , Jan 14 '17 at 14:28
Yes. Use [](https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router) to solve this problem. — , Jan 14 '17 at 14:35

score 0 · Answer 1 · answered Jan 15 '17 at 17:29

As per your route MasterStopwatch should be child component of App.

if you are passing props to MasterStopwatch you need to pass it from parentComponent App.

    export default class App extends React.component {
        ....
        ....
        render(){

           return(
           <div>
              <MasterStopwatch  {...props}/>
           </div>
          )
        }
     }

    export function MasterStopwatch(props) {
        return <span>{props.time}</span>
    }

score 0 · Answer 2 · answered Jan 15 '17 at 18:32

Change your App and MasterStopWatch as follows:

export default class App extends React.Component {
render() {
   return React.cloneElement(
        this.props.children, 
        {time: this.props.time}
    );
}

}

export default class MasterStopWatch extends React.Component {
render() {
   return <span>{this.props.time}</span>
}

}

Source: http://javascript.tutorialhorizon.com/2015/11/02/pass-props-to-handler-component-in-react-router/

React use component with props in a different file

2 Answers2