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