Im still not quite sure how reacts parents/children work.

I have a ponent called quiz which pulls in my quizBody ponent

<div className="quizContainer">
  <h1>{this.props.quizName}</h1>
  <QuizBody
    quizName={this.props.quizName}
    time={this.props.time}
    start={this.startQuiz}
    disabled={this.state.disabled}
    onEnter={this.onEnter}
    handleEnteredValue={this.handleEnteredValue}
    youWon={this.state.youWon}
  />
</div>

so I assumed that quiz would be the parent of quizBody? but when I call this.props.children in either file. I get undefined? can post more code if necessary but just confused as to how children work in react.

Im still not quite sure how reacts parents/children work.

I have a ponent called quiz which pulls in my quizBody ponent

<div className="quizContainer">
  <h1>{this.props.quizName}</h1>
  <QuizBody
    quizName={this.props.quizName}
    time={this.props.time}
    start={this.startQuiz}
    disabled={this.state.disabled}
    onEnter={this.onEnter}
    handleEnteredValue={this.handleEnteredValue}
    youWon={this.state.youWon}
  />
</div>

so I assumed that quiz would be the parent of quizBody? but when I call this.props.children in either file. I get undefined? can post more code if necessary but just confused as to how children work in react.

• javascript
• reactjs
• parent-child
• children

Share Improve this question Follow edited Jun 21, 2017 at 21:34 iagowp 2,49422 gold badges2323 silver badges3232 bronze badges asked Jun 21, 2017 at 21:13 The wormThe worm 5,8881414 gold badges4040 silver badges5151 bronze badges 3

• You can think of props as the attributes or properties within a tag and props.children as the content between the tags. Here your QuizBody doesn't have any content between the tag, so naturally it's undefined or null. In the DOM, the content between the tags is considered a child node. – Charles Owen Commented Jun 21, 2017 at 21:22
• basically inside my quizBody ponent, i have an input box with a ref tag. how can I get access to that ref tag? – The worm Commented Jun 21, 2017 at 21:24
• ref={ref => this.inputRef = ref}, then elsewhere in QuizBody you can refer to this.inputRef. – Mike Commented Jun 21, 2017 at 21:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

props.children is set to the current element's content.

<Outer>
  {"hello!"}
</Outer>

In this case, Outer's this.props.children is"hello".

In your example this.props.children is undefined in QuizBody because the QuizBody you created has no content.

Given the following ponent structure:

<Parent>
    <Children />
    <Children />
</Parent>

The ponent Parent has 2 children (Child).

One use case of React.children is as follows:

class Parent extends React.Component {
  render() {
    console.log(this.props.children);
    return (
      <div>
        { this.props.children } 
      </div>
    )
  }
}

const Child = () => <div>Hello</div>

const Family = () => <Parent>
  <Child/>
  <Child/>
</Parent>

ReactDOM.render(<Family />, 
document.getElementById('app'))

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Check this sample to understand how 'children' work.

var Parent = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.children.map(child => <div>
            Child: {child}
        </div>)}
        <span>I'm not a child</span>
      </div>
    );
  }
});

var Child = React.createClass({
  render: function() {
    return (
      <span> I'm {this.props.name} </span>
    );
  }
});

ReactDOM.render(
  <Parent>
    <Child name="one" />
    <Child name="two" />
  </Parent>
  ,
  document.getElementById('container')
);