Search code examples
reactjsreact-proptypes

React PropTypes: An array of different object shapes


How would I declare a proptype definition for an array that can contain a set of different object shapes? e.g.,

If I have a component, e.g., EmailRenderer that takes a prop called called sections that is an array of different objects, each with a unique type and it's associated properties.

const sections = [
    {
        type: "h1",
        copy: "Header!",
    },
    {
        type: "p1",
        copy: "lots of copy....",
    },
    {
        type: "image-main",
        src:
            "http://www.some-image.com",
        alt: "blah",
    },
    {
        type: "button",
        buttonType: "secondary",
        copy: "Watch now!",
        href: "#",
    },
    {
        type: "p1",
        copy: "more copy...",
    },
];

// ...

class EmailRenderer extends React.Component {
  // ...
}

//...

EmailRenderer.propTypes = {
  sections: PropTypes.arrayOf(
    // ???
  )
}

<EmailRenderer sections={sections} />


Solution

  • Declare classes for each of the "types", let's call them TypographyElement (copy), MediaElement (src), ButtonElement (href).

    Then the sections prop can be declared as

    sections : PropTypes.arrayOf(
      PropTypes.oneOf(
       [
          PropTypes.instanceOf(TypographyElement), 
          PropTypes.instanceOf(MediaElement), 
          PropTypes.instanceOf(ButtonElement), 
          ...
       ]
      )
    );