Today I Learned

hashrocket A Hashrocket project

Force A Component To Only Have One Child

A component can normally have an arbitrary number of elements nested directly inside it. React's Children.only function can be used to force it to a single direct child.

import React, { Children, Component } from "react";

class App extends Component {
  render() {
    return (
        <span>There can only be one!</span>

const SingleChildContainer = props => {
  return Children.only(props.children);

export default App;

The React docs describe the behavior of Children.only as such, "Returns the only child in children. Throws otherwise.".

If you modify the return in App to contain the following JSX

  <span>There can only be one!</span>
  <div>What about me?!</div>

then an error will be thrown (React.Children.only expected to receive a single React element child).

The Provider component in react-redux is an example of where this is used.

See More #react TILs
Looking for help? At Hashrocket, our JavaScript experts launch scalable, performant apps on the Web, Android and iOS. Contact us and find out how we can help you.