Get child property in React

Question

I have two components: Cell and Screen. Cell is intended to be a child of screen, I'm going to use them like this:

<Screen>
  <Cell x={1} y={2}/>
  <Cell x={1} y={1}/>
</Screen>

The question: How I can get x and y props inside Screen's render method? Something like this:

render() {
  var {children} = this.props
  children[0].x // it doesn't work
...

Answer 1

You need to access them through props, in most of the cases. Like: children[0].props.x.