souldeux souldeux - 3 months ago 9
React JSX Question

Accessing state of children from parent component?

I don't think I fully understand how the Parent/Child relationship works in React. I have two components,

Column
and
Space
. When a
Column
is rendered, it creates some
Spaces
. I thought that meant that the
Column
would be the parent to those
Spaces
, but either I'm wrong or I'm using some part of
React.Children.count(this.props.children)
incorrectly - it always tells me that any given
Column
has 0 children.

Simplified models:

var Column = React.createClass({
getInitialState: function() {
return {childCount: '', magicNumber: this.props.magicNumber};
},
componentDidMount: function() {
var newCount = React.Children.count(this.props.children);
this.setState({childCount: newCount});
},
render: function() {
return (
<div className='Column'>
{
Array.from({ length: this.state.magicNumber }, (x,y) => <Space key={y}/>)
}
</div>

);
}
});

var Space = React.createClass({
render: function() {
return (
<div className="Space">
space here
</div>
);
}
});


It seems like no matter where I put
React.children.count(this.props.children)
in a
Column
, it tells me there are 0 children. I would expect the
Column
generated in the example code to have five children, since five
Space
s are created within it.

I figured maybe I was trying to count the Children before they were fully loaded, so I tried writing a click handler like this:

//in Column
setChildCount: function () {
var newCount = React.Children.count(this.props.children);
this.setState({childCount: newCount});
}


Then adding a button like this in my
Column
:

...
render: function() {
return (
<div className='Column'>
{
Array.from({ length: this.state.magicNumber }, (x,y) => <Space key={y}/>)
}
<button onClick={this.setChildCount} />
{this.state.childCount}
</div>
);


But my
childCount
is always and forever 0. Can anyone see where I'm going wrong?

Edit: Ultimately, I want to get a count of all children elements who have X attribute in their state set to Y value, but I am clearly a step or three away from that.

Answer

The Column component doesn't have any children on that code. Childrens are components which are wrapped by the parent component. So imagine:

<Column>
 <Space/>
 <Space/>
<Column/> 

In this case the parent Column has two children Space

On your code:

        <div className='Column'>
           {
               Array.from({ length: this.state.magicNumber }, (x,y) => <Space key={y}/>)
           }  
        </div>

You are creating new components inside a divnot inside the component Column

Comments