What is {this.props.children} and when you should use it?

by

What even is ‘children’?

The React docs say that you can use props.children on components that represent ‘generic boxes’ and that don’t know their children ahead of time. For me, that didn’t really clear things up. I’m sure for some, that definition makes perfect sense but it didn’t for me.

My simple explanation of what this.props.children does is that it is used to display whatever you include between the opening and closing tags when invoking a component.

A simple example:

Here’s an example of a stateless function that is used to create a component. Again, since this is a function, there is no this keyword so just use props.children

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

This component contains an <img> that is receiving some props and then it is displaying {props.children}.

Whenever this component is invoked {props.children} will also be displayed and this is just a reference to what is between the opening and closing tags of the component.

//App.js
render () {
  return (
    <div className="container">
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

Instead of invoking the component with a self-closing tag <Picture /> if you invoke it will full opening and closing tags <Picture> </Picture> you can then place more code between it.

This de-couples the <Picture> component from its content and makes it more reusable.

Reference: A quick intro to React’s props.children

More Related Contents:

  1. React useEffect in depth / use of useEffect?
  2. React Context vs React Redux, when should I use each one? [closed]
  3. How do I test axios in Jest?
  4. Understanding React-Redux and mapStateToProps()
  5. How do I access store state in React Redux?
  6. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  7. Changing the layout of a component depending on Redux state
  8. Global state in React Native
  9. Redux Presentational Components Vs Container Component
  10. How can I dispatch function in redux?
  11. Component won’t update when a redux state change occurs
  12. On React Router, how to stay logged in state even page refresh?
  13. Could not find “store” in either the context or props of “Connect(App)”
  14. Understanding unique keys for array children in React.js
  15. What do these three dots in React do?
  16. Arrow function without curly braces
  17. Problem in redirecting programmatically to a route in react router v6
  18. React – changing an uncontrolled input
  19. What does npm install –legacy-peer-deps do exactly? When is it recommended / What’s a potential use case?
  20. What is the difference between using constructor vs state = {} to declare state in react component?
  21. Development server of create-react-app does not auto refresh
  22. Arrow functions and the use of parentheses () or {} or ({})
  23. ReactJS – Pass props with Redirect component
  24. What does calling super() in a React constructor do?
  25. Using Matter.js to render to the DOM or React
  26. Playing sound in React.js
  27. React: Axios Network Error
  28. What is the best way to have a fallback image in NextJS?
  29. React cannot read property map of undefined
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment