React Props
Passing and using props in components
Passing Props
<Welcome name="John" age={30} /> # pass props
<Welcome {...user} /> # spread props
Receiving Props
function Welcome(props) { # props object
return <h1>{props.name}</h1>;
}
Destructuring Props
function Welcome({ name, age }) { # destructure props
return <h1>{name}</h1>;
}
Default Props
function Welcome({ name = "Guest" }) { # default value
return <h1>{name}</h1>;
}
Children Prop
function Card({ children }) { # children prop
return <div className="card">{children}</div>;
}
<Card>Content</Card> # pass children
PropTypes
import PropTypes from 'prop-types';
Welcome.propTypes = {
name: PropTypes.string.isRequired, # type checking
age: PropTypes.number
};