Props.children



    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
```jsx
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.

```jsx
//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 with 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.