React.isValidElement

Knowing what input type you’ve received is hugely important in JavaScript, which is a big reason for Flow and TypeScript’s rise. One such case where it’s useful to know what an object represents is if the input is a string or a React element.

To detect if an object is a React element, you can use React.isValidElement(obj):

// Add a wrapping DIV if the content isn't a React element
// PropTypes.oneOfType([PropTypes.string, PropTypes.element])
render() {
  const { content } = this.props
  React.isValidElement(content)) ?
    content :
    <div class="text-message">{content}</div>
}

I really like that React.isValidElement allows us to create flexible elements that accept React elements or strings; hugely useful in generic components like modals, alerts, and everywhere else!