Variable order in React Component using Airbnb Guidelines

Question

I'm running into this problem that I'm not sure how to fix.

I'm coding React with Typescript and we have implemented Airbnb config for Typescript in our project. This is an example of my code:

class Grid extends React.PureComponent<GridProps, GridState> {
    private ref: React.RefObject<HTMLDivElement> = React.createRef();

    private location: History<any>;

    private history: Location<any>;


    public constructor(props: GridProps) {
        super(props);

        this.state = {
            rowHeight: 300,
            expandedCardId: this.props.expandedCardId || null,
            cardIdToScroll: null,
        };
    }

    private isCardsInfoReady = (): boolean => this.props.cardIds.length !== 0 && this.props.cardLayouts.length !== 0;

My problem is linter is yelling at the line of private Location that location should be placed after isCardsInfoReadyeslint(react/sort-comp);

This can be easily fixed by moving it or doing the following:

private location: History<any>|null = null;

As you can see, the moment I assign a value to it, linter is fine with me put it on the top. If I only assign in constructor, it still doesn't allow.

Since I don't like either way, I'm wondering whether there is a better work around on this.

Thanks!