React Component and props.children

The game of React is in its components. Almost everything here is a component. Sooner or later the need to pass properties to components will arise. This is straight forward as we know like this.

<MyComp myTitle='Nice Component' />

Inside component we can access this with props.myTitle.

const MyComp = (props)=>{	
	return(
		<div>
			{ props.myTitle }
		</div>
	)
}

This can also be written as below.

const MyComp = ( {myTitle} )=>{	
	return(
		<div>
			{ myTitle }
		</div>
	)
}

There is a nice magic props that React has, on all the components. That is known as props.children.

This props takes all the elements inside the opening and closing of the component tag and passes it to the component as children.

<MyComp>
	<div> Title </div>
	<div> Sub Title </div>
	<div> Description </div
</MyComp>

While defining the MyComp component, we can access these like below.

const MyComp = (props)=>{
	return(
		<div>
			{ props.children }
		</div>
	)
}

This is very helpful to know while writing components which can have child components inside of it. This way, one can write the components tag as if it is HTML tag.

Happy Coding.