What are props?

props (short for properties) are a Component’s configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned. - react-guide

See : State vs Props & Application Data also props vs state

How do I pass props?

// manual transfer
    <Shirt color="steelblue" num="3.14" size="medium"/>
// using JSX spread attributes
<Component {...this.props} more="values" />
// destructuring assignment with rest properties
// ensures that you pass down all the props EXCEPT the ones you're consuming yourself
function FancyCheckbox(props) {
  var { checked, ...other } = props;
  var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
  // `other` contains { onClick: console.log } but not the checked property
  return (
    <div {...other} className={fancyClass} />
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!

How do I pass boolean values?

Should I use import, props, or context in React?


Note: 📌 As of React v15.5.0 prop types are separate package +

PropTypes are essentially a dictionary where you define what props your component needs and what type(s) they should be. - Niels Gerritsen

What are PropTypes?

Why are React PropTypes important?

How do I validate props?

Destructuring Props and DefaultProps

function ExpandableForm({ onExpand, expanded = false, children }) {
  return (
) }

More info: Our Best Practices for Writing React Components