0

I have a state 'isLoggedIn' in App Component.

Now, I want to pass this state as props to the child component 'Secret Component'.

<BrowserRouter>
    <App>
        <Switch>
            <Route path='/secret' component={Secret} />
            <Route path='/' component={Top} />
        </Switch>
    </App>

</BrowserRouter>

But, I'm using react-router(ver4.1) like this and can't figure out how to pass the state of App Component as props to its child component.

 const childrenWithProps = React.Children.map(this.props.children, (child) => {
            console.log(child);
            }
        );

I know, by doing like this, I can get an access to this.props.children and set additional props to them but since I wrap my components with Router Component, the children of App Component are now Route components, which makes it complicated...

Could anyone please tell me how to do it?

I'm also worried if I'm doing wrong on how to use react-router.

thanks!

index.js(entry point)

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import App from './components/App';
import Secret from './components/Secret';
import Top from './components/Top';

ReactDOM.render(
    <BrowserRouter>
        <App>
            <Switch>
                <Route path='/secret' component={Secret} />
                <Route path='/' component={Top} />
            </Switch>
        </App>

    </BrowserRouter>
    ,
    document.querySelector('.container')
);

App.js

import React, { Component } from 'react';

import NavigationMenu from './NavigationMenu';

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false
        };
        this.toggleAuthenticationStatus = this.toggleAuthenticationStatus.bind(this);
    }


    toggleAuthenticationStatus() {
        this.setState({
            isLoggedIn: !this.state.isLoggedIn
        });
    }


    render() {

        //I want to pass this.state.isLoggedIn as props to Secret Component!!!

        const childrenWithProps = React.Children.map(this.props.children, (child) => {
            console.log(child);
            }
        );

        return (
            <div>
                <NavigationMenu isLoggedIn={this.state.isLoggedIn} toggleAuthenticationStatus={this.toggleAuthenticationStatus} />
                {this.props.children}
            </div>
        )
    }
}

Secret.js

import React, { Component } from 'react';

class Secret extends Component {

    constructor(props) {
        super(props);
    }


    componentWillMount() {
        if (this.props.isLoggedIn === false) {
            this.props.history.push('/');
        }
    }

    componentWillUpdate() {
        if (this.props.isLoggedIn === false) {
            this.props.history.push('/');
        }
    }

    render() {
        return (
            <div>
                This content is only for our members!
            </div>
        )
    }
}

export default Secret;

1 Answer 1

1

In react-router v4 recommended approach is putting nested routes inside the parent component instead of pass those as children (see the basic example of react-router v4). So in your case, I suggest you to simply replace {this.props.children} with Routes with the Switch component and stop passing them as the children of App. Then you can use render method of Route to pass props to the Secret component as usual.

return (
  <div>
    <NavigationMenu isLoggedIn={this.state.isLoggedIn} toggleAuthenticationStatus={this.toggleAuthenticationStatus} />
    <Switch>
      <Route path='/secret' render={() => <Secret isLoggedIn={this.state.isLoggedIn}/>)} />
      <Route path='/' component={Top} />
    </Switch>
  </div>
)
1
  • Thank you so much! I should've read the official document before asking. Ive read the docs and now i have better understanding on react-router.
    – user5809117
    Jun 17, 2017 at 7:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.