how to pass props in react

1class Welcome extends React.Component {
2  render() {
3    return <h1>Hello, {this.props.name}</h1>;
4  }
5}

1/* PASSING THE PROPS to the 'Greeting' component */
2const expression = 'Happy';
3<Greeting statement='Hello' expression={expression}/> // statement and expression are the props (ie. arguments) we are passing to Greeting component
4
5/* USING THE PROPS in the child component */
6class Greeting extends Component {
7  render() {
8    return <h1>{this.props.statement} I am feeling {this.props.expression} today!</h1>;
9  }
10}

1const Header = (props) => {
2    return (
3        <header>
4            <h1>{props.title}</h1>
5        </header>
6    )
7}
8
9export default Header

1const Label = props => <span>{props.content}</span>
2const Tab = props => <div>{props.content}</div>
3const Page = () => <Tab content={<Label content='Foo' />} />
4

1<input 
2		type= "text"
3     	value={ this.state.value || "" }
4     	placeholder="Enter Name"
5/>

1const Label = props => <span>{props.children}</span>
2const Button = props => {
3    const Inner = props.inner; // Note: variable name _must_ start with a capital letter 
4    return <button><Inner>Foo</Inner></button>
5}
6const Page = () => <Button inner={Label}/>
7