Airbnb JS StyleGuide & history.push don't combine

Question

I'm writing a React app, namely a navbar. I have a logo and navItems there. Logo display and color of the navbar background are conditional. Added Aibnb guide to esLint, now my navbar code looks like this:

class Toolbar extends Component {
    handleClick = () => {
        this.props.history.push('/');
    }

    render() {
        const { color, showLogo } = this.props;
        return (
            <header
                style={{
                    backgroundColor: color,
                }}
                className={classes.Toolbar}
            >
                <Logo click={this.handleClick} show={showLogo} />
                <NavItems />
            </header>
        );
    }
}

Toolbar.propTypes = {
    color: PropTypes.string.isRequired,
    showLogo: PropTypes.string.isRequired,
};

export default withRouter(Toolbar);

and I get the following eslint errors:

(line 11) is

this.props.history.push('/');

How do I transform this method to make the code compile and work without errors?

(Tried to rewrite it in as a destructing props assignment, got an error like cannot get 'push' of undefined)

t3__rry · Answer 1 · 2018-10-31T14:06:21.977

2

Setting the history PropType will help you get rid of the error:

Toolbar.propTypes = {
  color: PropTypes.string.isRequired,
  showLogo: PropTypes.string.isRequired,
  history: PropTypes.shape({
    push: PropTypes.func.isRequired,
  }).isRequired,
};

edited Oct 31 '18 at 14:06

answered Oct 31 '18 at 13:22

t3__rry

2,817
2
23
38

Yasin Tazeoglu · Accepted Answer · 2019-04-23T14:26:18.463

1

you should update

Toolbar.propTypes = {
color: PropTypes.string.isRequired,
showLogo: PropTypes.string.isRequired,
history:PropTypes.node
};

or

const {history} = this.props

Update

history:PropTypes.shape({push:PropTypes.func})

edited Apr 23 '19 at 14:26

answered Oct 31 '18 at 13:07

Yasin Tazeoglu

884
8
14

Airbnb JS StyleGuide & history.push don't combine

2 Answers2