Part 4: Component Validation with PropTypes
Learned:
- How to validate the props (data) passed to the components and child components using PropTypes
Repos.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var React = require('react'); var Repos = React.createClass({ // Validate that the component is receiving the required props (data) propTypes: { username: React.PropTypes.string.isRequired, repos: React.PropTypes.array.isRequired }, render: function () { return ( <div> Repos <br /> Username: {this.props.username} <br /> REPOS: {this.props.repos} </div> ) } }); module.exports = Repos; |
UserProfile.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var React = require('react'); var UserProfile = React.createClass({ propTypes: { username: React.PropTypes.string.isRequired, bio: React.PropTypes.object.isRequired }, render: function () { return ( // Each component can have it's own state, but when it receives it's // state from the parent component this is called props // These are the names of the props, because in the main component Profile.js // We have passed them as such: <UserProfile username={username} bio={this.state.bio} /> <div> User Profile <br /> Username: {this.props.username} <br /> Bio: {this.props.bio} </div> ) } }); module.exports = UserProfile; |
Notes.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var React = require('react'); var Notes = React.createClass({ propTypes: { username: React.PropTypes.string.isRequired, notes: React.PropTypes.array.isRequired }, render: function () { return ( <div> Notes <br /> Username: {this.props.username} <br /> NOTES: {this.props.notes} </div> ) } }); module.exports = Notes; |
