Kirk Ross Kirk Ross - 25 days ago 8
React JSX Question

React const render method syntax for propTypes?

Syntax question... I'm trying to figure out where to set proptypes in the newer React const render method.

In this const, where would I place the propTypes: {...} block?

const PlaylistAlbumInfoOverlay = () => (

<div className="playlist-album-info-overlay">
<h2>Album Title</h2>
<p className="album-kind">Private</p>
</div>
);

export default PlaylistAlbumInfoOverlay;

Answer

Similar to how you attach propTypes to a class not using the ES7 class property syntax (stage 1 proposal), you can attach them as a property of the arrow function:

const PlaylistAlbumInfoOverlay = () => (
  <div className="playlist-album-info-overlay">
    <h2>Album Title</h2>
    <p className="album-kind">Private</p>
  </div>
);

PlaylistAlbumInfoOverlay.propTypes = {
  // ...
};

export default PlaylistAlbumInfoOverlay;