import React from 'react';
import ReactDOM from 'react-dom';
//importing prop-types
import PropTypes from 'prop-types';
const App = props => {
const user = {
name: 'George Bailey',
address: '1122 Drafty House',
city: 'Bedford Falls',
state: 'New York',
zip: 13148
};
return <User person={user} items="Boots, Tie, Socks" amount={100} />;
};
const User = props => (
<ul>
<li>Name: {props.person.name}</li>
<ul>
<li>Address: {props.person.address}</li>
<li>City: {props.person.city}</li>
<li>State: {props.person.state}</li>
<li>Zip: {props.person.zip}</li>
</ul>
<li>Items: {props.items}</li>
<li>Paid: {String(props.paid)}</li>
<li>Amount: {props.amount}</li>
<li>Shipped: {String(props.shipped)}</li>
</ul>
);
//setting required and optional props
User.propTypes = {
person: PropTypes.shape({
name: PropTypes.string.isRequired,
address: PropTypes.string.isRequired,
city: PropTypes.string.isRequired,
state: PropTypes.string.isRequired,
zip: PropTypes.number.isRequired,
}),
items: PropTypes.string.isRequired,
paid: PropTypes.bool,
amount: PropTypes.number.isRequired,
shipped: PropTypes.bool
};
//setting default props
User.defaultProps = {
paid: false,
shipped: false
};
ReactDOM.render(<App />, document.getElementById('root'));