ReactJS - how a child access it's parent's props?

There is no way to access parent props in child component. you can achieve this in following two ways:-

  1. Pass values into child component from parent via props like this :- <NavItem key={index} publicUrl={this.state.publicUrl} item={item}></NavItem>.
  2. Set values in state and dispatch action from child to fetch values from state.

Also, I notice that you are setting values in state in componentDidMount, so either set default values for state in constructor OR check for undefined value in your child component


Check here

http://jsfiddle.net/z5m56sqn/

It is also possible to use this.handleChildClick.bind(null,childIndex) and then use this.state.childrenData[childIndex]

Note we are binding with a null context because otherwise React issues a warning related to its autobinding system. Using null means you don't want to change the function context. See also.


I must bind this to the loop:

var loop = this.state.navitems.map(function(item, index){
            return <NavItem key={index} publicUrl={this.state.publicUrl} item={item}></NavItem>;
}.bind(this));