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.
- 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 inQuizBody
you can refer tothis.inputRef
. – Mike Commented Jun 21, 2017 at 21:35
3 Answers
Reset to default 3props.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')
);