Pass state to recursively nested component in React / Redux

Question

I have a component that has children of the same type as the component itself. I can also portray children, but children do not seem to be able to access their piece of the state. I am using React with Redux

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) => ( <Material key={childId} id={childId} parentId={id} name={name} subtext={subtext} fileType={fileType} /> ) getNestedItems = (id, childIds) => { console.log("id: " + id) console.log("childIds: " + childIds) var childItems = [] for(var i=0; i < 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( <ListItem leftAvatar={<Avatar icon={fileType.length === 0 ? <FileFolder /> : <ActionAssignment />} />} rightIcon={fileType.length === 0 ? <AddCircle /> : <ActionInfo />} 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 /> ) } } const mapStateToProps = (state, ownProps) => { 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) 

In addition, I use ListItem from Material-ui (they end up being displayed inside the List component), and my code is heavily influenced by the tree example in the official repo repo. My condition looks like this:

 const initialState = { 0: { id: 0, name: 'Root', subtext: 'Some subtext', fileType: '', childIds: [1] }, 1: { id: 1, name: 'Child', subtext: 'Child subtext', fileType: 'png', childIds: [] } } 

The displayed state has the same structure as in the tree view example.

Answer 1

Well, if I understand correctly, you want these components of Material receive data from the redux store.
If this is what you want to achieve, you need to provide access to the reductions repository for each of the Material . Basically you need to wrap them all with the connect HOC.
Example:

 const MaterialContainer = connect(mapStateToProps)(Material); 

And inside the renderChild function renderChild you should use this MaterialContainer .

 renderChild = (id) => ( <MaterialContainer key={childId} id={childId} /> ) 

You can see how it works here https://jsbin.com/taquke/edit?js,output