title: Pass state to recursively nested component in React/Redux
body: <p>I have a component that has children of the same type as the component itself. I can render the children as well but the children can't seem to access their slice of state. I'm using React with Redux</p>
  
  <pre class="lang-js prettyprint-override"><code>export class Material extends React.Component {
  
    constructor(props) {
      super(props)
      this.renderChild = this.renderChild.bind(this)
      this.getNestedItems = this.getNestedItems.bind(this)
    }
  
    static propTypes = {
      parentId: PropTypes.number,
      id: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired,
      subtext: PropTypes.string.isRequired,
      childIds: PropTypes.arrayOf(PropTypes.number.isRequired),
      fileType: PropTypes.string.isRequired
    }
  
    // This is where I am having trouble.
    // Shouldn't the props be accessible from state itself?
  
    renderChild = (id, childId) =&gt; (
        &lt;Material key={childId}
          id={childId}
          parentId={id}
          name={name}
          subtext={subtext}
          fileType={fileType}
          /&gt;
      )
  
    getNestedItems = (id, childIds) =&gt; {
      console.log("id: " + id)
      console.log("childIds: " + childIds)
      var childItems = []
      for(var i=0; i &lt; childIds.length; i++){
          var child = this.renderChild(id, childIds[i])
          childItems.push(child)
      }
      return childItems
    }
  
    render(){
  
      let childItems = []
      if(this.props.childIds){
        childItems = this.getNestedItems(this.props.id, this.props.childIds)
      }
  
      return(
        &lt;ListItem
          leftAvatar={&lt;Avatar icon={fileType.length === 0 ? &lt;FileFolder /&gt; : &lt;ActionAssignment /&gt;} /&gt;}
          rightIcon={fileType.length === 0 ? &lt;AddCircle /&gt; : &lt;ActionInfo /&gt;}
          primaryText={name}
          secondaryText={subtext}
          initiallyOpen={fileType.length === 0} // fileType is empty if it is a folder
          primaryTogglesNestedList={fileType.length === 0}
          nestedItems={childItems} // one has to pass an array of elements
        /&gt;
      )
    }
  }
  
  const mapStateToProps = (state, ownProps) =&gt; {
    return {
      id: ownProps.id,
      name: state.Material[ownProps.id].name,
      subtext: state.Material[ownProps.id].subtext,
      childIds: state.Material[ownProps.id].childIds,
      fileType: state.Material[ownProps.id].fileType,
    }
  }
  
  export default connect(
    mapStateToProps
  )(Material)
  </code></pre>
  
  <p>Also, I'm making use of <a href="http://www.material-ui.com/#/components/list" rel="noreferrer">ListItem from Material-ui</a> (these are ultimately rendered inside a List component) and my code is heavily influenced from the <a href="https://github.com/reactjs/redux/tree/master/examples/tree-view" rel="noreferrer">tree-view example</a> in the official redux repo. My state looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>const initialState = {
    0: {
        id: 0,
        name: 'Root',
        subtext: 'Some subtext',
        fileType: '',
        childIds: [1]
      },
    1: {
        id: 1,
        name: 'Child',
        subtext: 'Child subtext',
        fileType: 'png',
        childIds: []
      }
  
  }
  </code></pre>
  
  <p>The state shown has the same structure as in the tree-view example</p>