Pagination – Type Checking with Prop Type
What if the user passes something unexpected. Instead of an integer count. It passes a string “abc”.
|
1 2 3 4 5 6 |
<Pagination itemsCount={count} pageSize={pageSize} currentPage = {currentPage} onPageChange={this.handlePageChange} /> |
In Pagination functional component, the string divides by integer. And thus, pagesCount becomes NaN. NaN gets calculated further and nothing comes of it.
npm i prop-types@15.6.2
pagination.jsx
|
1 2 3 4 5 6 7 8 9 10 11 |
import PropTypes from 'prop-types'; .. .. // camel notation Pagination.propTypes = { itemsCount: PropTypes.number.isRequired, pageSize: PropTypes.number.isRequired, currentPage: PropTypes.number.isRequired, onPageChange: PropTypes.func.isRequired, } |
Now let’s put a string, instead of an integer.
movies.jsx
|
1 2 3 4 5 6 7 8 |
.... ... <Pagination itemsCount="abc"//{count} pageSize={pageSize} currentPage = {currentPage} onPageChange={this.handlePageChange} /> |
In the console, we’ll get a warning:
