What is this props children and when you should use it

Question

Being a beginner to React world  I want to understand in depth what happens when I use  this props children  and what are the situations to use the same  What is the relevance of it in below code snippet   render       if  this props appLoaded        return          lt div gt           lt Header           appName  this props appName            currentUser  this props currentUser            gt           this props children         lt  div gt

User · Accepted Answer

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    gt      return        lt div gt         lt img src  props src   gt         props children       lt  div gt             This component contains an  lt img gt  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        lt div className  container  gt         lt Picture key  picture id  src  picture src  gt              what is placed here is passed as props children          lt  Picture gt       lt  div gt             Instead of invoking the component with a self-closing tag  lt Picture   gt  if you invoke it will full opening and closing tags  lt Picture gt   lt  Picture gt  you can then place more code between it       This de-couples the  lt Picture gt  component from its content and makes it more reusable    Reference  A quick intro to React   s props children

User · Answer

props children represents the content between the opening and the closing tags when invoking rendering a component  const Foo   props   gt       lt div gt       lt p gt I m  Foo name  lt  p gt       lt p gt abc is   props abc  lt  p gt        lt p gt I have  props children length  children  lt  p gt       lt p gt They are   props children   lt  p gt       lt p gt  Array isArray props children     My kids are an array         lt  p gt     lt  div gt      const Baz        gt   lt span gt  Baz name  and lt  span gt   const Bar        gt   lt span gt   Bar name  lt  span gt    invoke call render Foo   lt Foo abc  123  gt     lt Baz   gt     lt Bar   gt   lt  Foo gt

User · Answer

I assume you re seeing this in a React component s render method  like this  edit  your edited question does indeed show that     x000D   x000D  class Example extends React Component   x000D    render     x000D      return  lt div gt  x000D         lt div gt Children   this props children length    lt  div gt  x000D         this props children  x000D       lt  div gt   x000D      x000D    x000D   x000D  class Widget extends React Component   x000D    render     x000D      return  lt div gt  x000D         lt div gt First  lt code gt Example lt  code gt   lt  div gt  x000D         lt Example gt  x000D           lt div gt 1 lt  div gt  x000D           lt div gt 2 lt  div gt  x000D           lt div gt 3 lt  div gt  x000D         lt  Example gt  x000D         lt div gt Second  lt code gt Example lt  code gt  with different children  lt  div gt  x000D         lt Example gt  x000D           lt div gt A lt  div gt  x000D           lt div gt B lt  div gt  x000D         lt  Example gt  x000D       lt  div gt   x000D      x000D    x000D   x000D  ReactDOM render  x000D     lt Widget  gt   x000D    document getElementById  root   x000D     x000D   lt div id  root  gt  lt  div gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   x000D   x000D    children is a special property of React components which contains any child elements defined within the component  e g  the divs inside Example above   this props children  includes those children in the rendered result         what are the situations to use the same   You d do it when you want to include the child elements in the rendered output directly  unchanged  and not if you didn t

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

Examples related to javascript

Examples related to reactjs

Examples related to react-redux

Examples related to frontend