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