Skip to content

Instantly share code, notes, and snippets.

@jeffhandley
Created November 6, 2017 17:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeffhandley/9d7188288db1eeea795fe467ad0acd8a to your computer and use it in GitHub Desktop.
Save jeffhandley/9d7188288db1eeea795fe467ad0acd8a to your computer and use it in GitHub Desktop.
Defining PropTypes for nested components
/* NameDisplay.js */
import ReactPropTypes from 'prop-types';
const NameDisplay = ({name}) => (
<div>
<div>
First Name: {name.first}
</div>
<div>
Last Name: {name.last}
</div>
</div>
);
export const PropTypes = {
name: ReactPropTypes.shape({
first: ReactPropTypes.string.isRequired,
last: ReactPropTypes.string.isRequired
}).isRequired
};
NameDisplay.propTypes = PropTypes;
export default NameDisplay;
/* CurrentUser.js */
import ReactPropTypes from 'prop-types';
import NameDisplay from './NameDisplay';
const CurrentUser = ({company, name}) => (
<div>
<div>
Company: {company}
</div>
<NameDisplay name={name} />
</div>
);
export const PropTypes = {
company: ReactPropTypes.string.isRequired,
name: ReactPropTypes.object.isRequired
};
CurrentUser.propTypes = PropTypes;
export default CurrentUser;
/* LastLogin.js */
import ReactPropTypes from 'prop-types';
import NameDisplay, {PropTypes as NameDisplayPropTypes} from './NameDisplay';
const LastLogin = ({lastLoggedIn, name}) => (
<div>
<div>{name.first} {name.last} last logged in {lastLoggedIn}</div>
<NameDisplay />
</div>
);
export const PropTypes = {
lastLoggedIn: ReactPropTypes.string.isRequired,
name: NameDisplayPropTypes.name // or would it be better to redefine the `shape({first, last})` since it's being consumed?
};
LastLogin.propTypes = PropTypes;
export default LastLogin;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment