A component’s .propTypes object declares the props it expects. In React versions before 19, validators from the prop-types package can warn when a component receives a prop of the wrong type or lacks a required prop. This makes a component’s contract easier to check, but validation happens only when the code runs. section 4.3 section 4.3.2
import PropTypes from 'prop-types'; #1
function Input({ name, label, value, onChange }) { #2
return (
<label>
{label}
<input name={name} value={value} onChange={onChange} />
</label>
);
}
Input.propTypes = { #3
name: PropTypes.string, #4
label: PropTypes.string, #4
value: PropTypes.string, #4
onChange: PropTypes.func, #5
};
export default Input;
The Input listing imports PropTypes and assigns validators after defining the component: three string props and a function-valued onChange prop. section 4.3.1
Choose validators to match the contract:
- Use validators such as PropTypes.string, PropTypes.number, PropTypes.bool, and PropTypes.func for individual values. section 4.3.1
- Use PropTypes.shape for an object’s named properties and PropTypes.arrayOf for array elements; shapes can be nested. section 4.3.1
- Append .isRequired when a missing prop should be flagged; otherwise the prop remains optional. section 4.3.1
Install prop-types with npm install --save prop-types. ESLint rules react/prop-types and react/no-unused-prop-types can help keep declarations aligned with component usage. The trade-off is substantial: .propTypes checks only component props, gives no feedback while typing, and is ignored by React 19. For broader, in-editor type checking—particularly when upgrading to React 19—consider TypeScript instead. section 4.3.4 section 4.3.2
