I have two ponents: 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
...

I have two ponents: 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
...

• javascript
• reactjs

Share Improve this question Follow edited Nov 9, 2017 at 11:24 JackHasaKeyboard 1,69511 gold badge1717 silver badges3030 bronze badges asked Oct 25, 2015 at 9:17 kharandziukkharandziuk 12.9k1818 gold badges7474 silver badges127127 bronze badges 7

• 2 In general, try to send information or state down into children, rather than having children send them up to their parents. – Hyung Cho Commented Oct 25, 2015 at 15:49
• ^^ agreed, try storing the cells' x/y properties in the Screen ponent or above it, and pass these values down to the Cells. – Dylan Commented Oct 25, 2015 at 17:36
• Yep, it's nice as a general advice. But we have a concrete case. What the interface do you propose instead? – kharandziuk Commented Oct 25, 2015 at 17:52
• To keep code maintainable, pass anything that <Screen> needs as a prop to <Screen>, and leave the children alone. Also, you should not update props. Possible duplicate of stackoverflow./questions/26610392/… – wintvelt Commented Oct 25, 2015 at 21:44
• have you heard of flux? – John Ruddell Commented Oct 26, 2015 at 5:07

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 17

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