React - Props

About

props is the only object argument passed from a component to another component.

Props are similar to State, but is public and not fully controlled by the component.
You can also pass arguments to the whole tree via a context

<MyComponent name={javascriptVariable} color="Blue"/>

will create two props

Props:

must be named from the component's own point of view rather than the context in which it is being used.
are read-only. A component must never modify its own props. It must modify it via this.setState() All React components must act like pure functions with respect to their props. See React - State

Default values are defined by assigning to the special defaultProps property to the component.

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.defaultProps = {
  name: 'Stranger (Default)'
};

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

<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->
</div>

built-in Type checking in React is known as prop-types

You use the spread operator to destructure the object.

Example:

let props = { "x": 10, "y": 20 };
<Component {...props}/>

Example with the spread operator to merge properties.

function Parent(parentProps){
  return <Child  {...{extra: 'value', ...parentProps}}/>
}

Example how to add a class Name

function Parent(parentProps){
  return <Child  {...{...parentProps, className: 'value '+parentProps.className}}/>
}