Accessing parent state in child in React
The proper way of doing this would be by passing state as props
to Docs
component.
However, because you are using React Router
it can be accessed in a bit different way: this.props.route.param
instead of default this.props.param
So your code should look more or less like this:
<Route path="/docs" component={Docs} docs={this.state.docs} />
and
{this.props.route.docs.map(function(study, key) { return <p>Random text here</p>; })}
Another way of doing this is:
<Route path="/docs" component={() => <Docs docs={this.state.docs}/>}>
If you need to pass children:
<Route path="/" component={(props) => <Docs docs={this.state.docs}>{props.children}</Docs>}>
If you are doing it like this, then you can access your props values directly by this.props.docs
in Child Component:
{ this.props.docs.map((study, key)=> { return <p key={key}>Random text here</p>; })}
Another way of doing this will be
<Route path='/' render={ routeProps => <Home {...routeProps} docs={this.state.docs} /> } />
While in the child component you can access docs
using
this.props.docs
Hope it helps!