Props : default props

 

class App extends React.Component {
	render() {
		return (
			<div>
				<Hello
					to="Ringo"
					from="Paul"
					bangs={4}
				/>
				<Hello
					to="Andy"
				/>
			</div>
		);
	}
}


ReactDOM.render(<App />, document.getElementById('root'));

 

 

 

we can set default props with [static defaultProps] statement.

class Hello extends React.Component {
    static defaultProps = {
        from: 'Anonymous',
        bangs: 1
    }
    render() {
        const props = this.props;
        let bangs = "!".repeat(props.bangs);
        return (
            <div>
                <p>Hello {props.to} from {props.from} {bangs}</p>
            </div>
        );
    }
}​

 

 

-> Ringo get his personal props <Hello /> from paul with 4 bangs,  Andy get default <Hello /> from Anon because we didn't set any personal prop to his <Hello/ > prop.