In the last lesson, we see how to use props and how to recive them as an argument and output them dynamially in our code using Children Property.

Children Property

Now we also want to outupt whatever we pass between the opening and closing tag of our custom component.

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
	render() {
		return (
			<div className="App">
				<Person name="Max" age="12">
           My Hobbies : Dancing {/* Some Additional Data */}
				</Person>
			</div>
		);
	}
}
export default App;

And that is actually super simple too. there is an special prop we can access, react gives us access to it, to be precise. In the Person component where we want to recive it in the end will wrap our paragraph in normal parentheses, so that I can write this over multiple lines.

import React from 'react';
const person = props => {
	return (
		<div>
			<p>
				I am a {props.name} and i am {props.age} year old!{' '}
			</p>
			<p> {props.children} </p>
		</div>
	);
};
export default person;

So we have wrapped our existing and new p element inside the container div element. the second p element will output the content which we have passed between the Person element in src/App.js.
It can be simply done by outputting the dynamic content inside { /* Props Children Property */ } i.e {props.children} property.
children is a word which we did noot pass anything as children on our Person component, We only pass name and age attributes. children reffers to any elements and this includes plain text as we have entered between the Person component. You can also nest complex HTML in between that dosent just have to be text it could be an ordered (ol) or unordered(ul) list or a Other react component.
After running the application you can see the hobbies is printed after the main paragraph.

Conslusion

You can put your content into your component from outside, Not only by passing props, but if you want to pass some structured HTML content, also by placing in between the compoenent tag and accessing it with props.children.

React introduction
React Component