React PropTypes: An array of different object shapes

Question

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} />

hazardous · Accepted Answer · 2019-12-19 06:48:03Z

1

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), 
      ...
   ]
  )
);

answered Dec 19, 2019 at 6:48

hazardous

10.8k2 gold badges44 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React PropTypes: An array of different object shapes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related