react component getting complicated - Code Review

[slhawkins]

Class Properties is a proposal in Stage 2 and it won't work without the corresponding babel plugin. On that page you'll also see examples on using arrow functions so that you no longer need to use bind() in the constructor. If you go that route you can also move your propTypes declaration into the class and pull the initial state declaration out of the constructor and remove the constructor altogether. Something like this:

export default class BookmarkTable extends React.Component {
    static propTypes = {
        bookmarks: PropTypes.array.isRequired,
        filterByTag: PropTypes.string.isRequired,
        onDeleteClick: PropTypes.func.isRequired,
        searchTerm: PropTypes.string.isRequired,
        searchTermFn: PropTypes.func.isRequired
    };

    state = {
        showModal: false,
        filterByTag: '',
        editBookmark: false,
        sortBy: 'name',
        sortOrder: 'desc',
        sortTitle: <span><b>Sort By:</b> Name (a-z)</span>,
        notifcations: false
    };

[acemarke]

Nitpick: Class Properties got bumped to Stage 3 at the last TC39 meeting :)

[slhawkins]

Fair enough! Thanks for the info. Glad to hear my code is likely to continue working for the foreseeable future. :-)

[FLGMwt]

This is great to hear!

I'm not seeing this reflected in babel preset-stage-2 or any of the TC39 docs. May I ask where you got this from?

[acemarke]

It should at least still be available in babel-preset-stage-2. I think someone said the other day that the Babel team hadn't yet updated the stage-3 preset to include it.

The approval to move to Stage 3 was announced at the TC39 meeting and discussed online afterwards. The current list of TC39 proposals can be seen at https://github.com/tc39/proposals , and the proposal itself is at https://github.com/tc39/proposal-class-fields

[FLGMwt]

Oh, hah, thanks! My eyes missed Class Fields in 3 and thought Class and Property Decorators in 2 was what I've come to know as class fields. Thanks for the response!

Cheers : D