React proptype array with shape

React PropTypes Array with Shape

When working with React, it is common to pass props from a parent component to a child component. PropTypes are a way to validate these props, ensuring that the correct data types are being passed. In some cases, you may need to pass an array of objects as a prop and validate its shape using PropTypes. In this article, we will explore how to define a PropTypes array with shape in React.

Let’s say we have a parent component called ParentComponent and a child component called ChildComponent. We want to pass an array of objects as a prop called data to ChildComponent. Each object in the array should have a specific shape, with properties like name, age, and email. Here’s how we can define the PropTypes array with shape:

{`
import React from 'react';
import PropTypes from 'prop-types';

const ChildComponent = ({ data }) => {
  return (
    

      {data.map((item, index) => (
        

          
{item.name}
          Age: {item.age}
          Email: {item.email}
        
      ))}
    
  );
};

ChildComponent.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired,
      email: PropTypes.string.isRequired,
    })
  ).isRequired,
};

export default ChildComponent;
`}

In the above code snippet, we import the PropTypes module from the prop-types package. We then define the ChildComponent functional component and specify the data prop using PropTypes.arrayOf. Inside PropTypes.arrayOf, we use PropTypes.shape to define the shape of each object in the array. The shape is defined as an object with properties like name, age, and email. We also specify that each property is required using PropTypes.string.isRequired or PropTypes.number.isRequired.

By using this PropTypes array with shape, we can ensure that the data prop passed to ChildComponent is an array of objects with the specified shape. If the prop does not match the defined shape, a warning will be displayed in the console.

Here’s an example usage of the ChildComponent with the data prop:

{`
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = [
    { name: 'John Doe', age: 25, email: 'john@example.com' },
    { name: 'Jane Smith', age: 30, email: 'jane@example.com' },
  ];

  return (
    

      
Parent Component
      
    
  );
};

export default ParentComponent;
`}

In the ParentComponent, we define the data array with objects that match the shape defined in the ChildComponent. We then pass the data array as a prop to the ChildComponent. The ChildComponent will render each object in the array, displaying the name, age, and email properties.

By using PropTypes array with shape, we can ensure that the data passed between components is of the correct shape, reducing the chances of runtime errors and improving code reliability.

That’s it! Now you know how to define a PropTypes array with shape in React. Happy coding!