Props

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
ReactDOM.render(
  <div>
    <Shirt color="steelblue" num="3.14" size="medium"/>
  </div>,
  document.querySelector("#container")
);
// 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} />
  );
}
ReactDOM.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,
  document.getElementById('example')
);

How do I pass boolean values?

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

PropTypes

Note: 📌 As of React v15.5.0 prop types are separate package https://github.com/reactjs/prop-types#installation + https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html


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 (
    
{children}
) }

More info: Our Best Practices for Writing React Components