If a component has only one child, what does this.props.children return?

If a component has only one child, what does this.props.children return?

• A. An array containing the child
• B. Undefined
• C. The single child
• D. A string

Answer: (C)

The value of this.props.children depends on how many children you pass to a component. When there is exactly one child, React provides that child directly, not inside an array. So this.props.children is the single child element (or value) you supplied, which lets you render or pass it through without extra indexing. This is why the single-child case is the best fit here. If there were multiple children, you’d get an array of them and would typically map over it. If there are no children, this.props.children would be undefined or null. If you ever need to enforce exactly one child, you can use React.Children.only(this.props.children) to throw if there isn’t exactly one.

The value of this.props.children depends on how many children you pass to a component. When there is exactly one child, React provides that child directly, not inside an array. So this.props.children is the single child element (or value) you supplied, which lets you render or pass it through without extra indexing.

This is why the single-child case is the best fit here. If there were multiple children, you’d get an array of them and would typically map over it. If there are no children, this.props.children would be undefined or null. If you ever need to enforce exactly one child, you can use React.Children.only(this.props.children) to throw if there isn’t exactly one.