HOWTO · React
React Proptype Array With Shape
Learn how to use React PropTypes array with shape to enhance data validation in your applications. This tutorial explains the benefits of PropTypes, provides code examples, and guides you through implementing PropTypes.shape() for better error detection. Discover how to catch bugs early and improve your code quality today.
On this page
PropTypes.arrayOf(PropTypes.shape(...)) describes an array whose items are objects with specified fields. The prop-types package checks this component contract in development and can warn when supplied props do not match it.
What PropTypes validates
PropTypes declares the types and object structure a component expects. It helps document the component interface and can surface mismatches while developing. These checks produce console warnings; they do not stop a component from rendering, and they are not production data validation.
Validate an array of objects with PropTypes
Install the prop-types package in your React project. In the component module, import it with import PropTypes from 'prop-types' and declare items: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string.isRequired, value: PropTypes.number.isRequired })).isRequired. This applies the object shape to every item. The small JavaScript example below shows the same data flowing through a list renderer; it runs on its own, while the PropTypes declaration belongs in the React component module.
const items = [
{ name: 'Ada', value: 7 },
{ name: 'Lin', value: 9 },
];
function renderItems(items) {
return `<ul>${items.map((item) => `<li>${item.name}: ${item.value}</li>`).join('')}</ul>`;
}
console.log(renderItems(items));
<ul><li>Ada: 7</li><li>Lin: 9</li></ul>
In the React component, use the items prop with that same array and render each entry with items.map(...); give each rendered element a stable key. The sample values match the declared fields, so the example shows the expected list content.
Make fields required and understand warnings
In the declaration, .isRequired on items means the prop must be supplied. The same modifier on name and value means each object is expected to contain those fields with the declared types. Remove .isRequired from a field when it may be omitted; the other declared fields remain checked. An object with value: '7' instead of a number does not match the shape, so React’s development checks report a console warning. The warning does not convert the string, reject the prop, or prevent rendering. Validate external or production data separately when the application depends on it.
FAQ
Does PropTypes validate every item in an array?
Yes. PropTypes.arrayOf applies its validator to each item. Combined with PropTypes.shape, it checks the specified fields on each object.
Does PropTypes.shape validate an array by itself?
No. PropTypes.shape describes one object’s fields. Use PropTypes.arrayOf(PropTypes.shape(...)) for an array of objects.
Are PropTypes required in React?
No. They are optional runtime checks that can document props and report development warnings. They do not replace static typing or validation of data at application boundaries.
