Components can have an immutable state in the form of read-only properties, also known as props. To have props, a component declares an additional
In the first example on the right, add an initial value to the counter with props:
So far, so good. But how do we check that the user of our component has indeed set a value for our property, and with the right type?
Enter property types. When the
propTypes attribute is set on a component, it specifies the type of each property that a component accepts, and whether it is required. A required property with no value, or with a value of the wrong type, will show a warning in the browser console.
counter-with-prop-types code to remove warnings:
Default property values
Props can have default values. This allows a component to have properties that are required, but whose value may be omitted when instantiating the component.
Fix the code
counter-with-default-props to add a default value to
initialCount to remove the warning:
Props and hierarchical components
A child component receive props from its parent component based on the parent's state. Whenever the parent's state changes, the child receives new props and if these are different from the child's current props, this triggers a render of the child.
The parent component has a list of its children stored in the
props.children opaque property. To count or iterate on its children, you need to use the
forEach functions of