CODEWITHSUNDEEP
reactjsreact-router-dom
Rohit Luthra
Rohit Luthra

Reputation: 1286

How to pass state from parent Component to child component in route (react-route-dom) reactjs

I am new to React.js and created a small react application using react-router-dom. In which I have two components:

  1. Dashboard(dashboard.js)
  2. Information(information.js)

and one main Component App, App.js, in which I am using the react-router-dom.

<Route exact path="/dashboard" render={props => <Dashboard someProp="2" {...props} />} />
<Route exact path="/information" render={props => <Information someProp="2" {...props} />} />

I am able to send props from App component to dashboard and information but I want to send state. Can somebody help me, How can I send state from Parent component to child component?

Upvotes: 2

Views: 2425

Answers (2)

Rohit Luthra
Rohit Luthra

Reputation: 1286

Using above answer I am posting full code so that further users can understand this.

App.js file 

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {open: false};
    this.state = {message: "StackOverflow"};
  }

return (
        <Router>
          <div>
          <AppBar title="App" onLeftIconButtonTouchTap={this.handleToggle} />

            <Drawer containerStyle={{height: 'calc(100% - 64px)', top: 64}} docked={true} width={200} open={this.state.open} zDepth={2}>
              <Link to="/dashboard" style={{ textDecoration: 'none' }}><MenuItem>Dashboard</MenuItem></Link>
              <Link to="/information" style={{ textDecoration: 'none' }}><MenuItem>Information</MenuItem></Link>
            </Drawer>

            <Route exact path="/dashboard" render={props => <Dashboard someProp={this.state.message} {...props} />} />
            <Route exact path="/information" render={props => <Information someProp={this.state.message} {...props} />} />
          </div>
        </Router>
    );
}

Dashboard.js

import React from 'react';


class Dashboard extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    console.log(this.props);
    const {styleFromProps} = this.props;
    const contentStyle = {  ...styleFromProps, transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)' };

    return (
            <div style={contentStyle}><h1> Hello {this.props.someProp}</h1></div>
    );
  }
}

export default Dashboard;

Upvotes: 2

Naveed Aheer
Naveed Aheer

Reputation: 1825

In parent component you can send props like this

<child prop1 = {this.state.stateName} />

Upvotes: 2

Related Questions