Pass react component as props

Question

Lets say I have:

import Statement from \'./Statement\';
import SchoolDetails from \'./SchoolDetails\';
import AuthorizedStaff from \'./AuthorizedStaff\';

co         


        

Answer 1

Using this.props.children is the idiomatic way to pass instantiated components to a react component

const Label = props => {props.children}
const Tab = props => 
{props.children}
const Page = () => Foo

When you pass a component as a parameter directly, you pass it uninstantiated and instantiate it by retrieving it from the props. This is an idiomatic way of passing down component classes which will then be instantiated by the components down the tree (e.g. if a component uses custom styles on a tag, but it wants to let the consumer choose whether that tag is a div or span):

const Label = props => {props.children}
const Button = props => {
    const Inner = props.inner; // Note: variable name _must_ start with a capital letter 
    return Foo
}
const Page = () => 

If what you want to do is to pass a children-like parameter as a prop, you can do that:

const Label = props => {props.content}
const Tab = props => 
{props.content}
const Page = () => } />

After all, properties in React are just regular JavaScript object properties and can hold any value - be it a string, function or a complex object.