How to set state property to false

Question

I am checking to see if the user is on a device smaller than 768px, and if they are I want to set isTop to false. I am running into a few issues. Everything looks to be okay, but I keep getting this error:

TypeError: _this2.state.isTop is not a function

What I am working with:

componentDidMount() {
    this.updateWindowDimensions();
    window.addEventListener('resize', this.updateWindowDimensions);
    document.addEventListener('scroll', () => {
        const isTop = window.scrollY < window.innerHeight - 50;
        if (isTop !== this.state.isTop) {
          this.setState({ isTop })
        }
    });

    this.checkWidth = () => {
        const match = window.matchMedia(`(max-width: 768px)`);
        if (match) {
            this.state.isTop(false);
        }
    };

    this.checkWidth();
    window.addEventListener('resize', this.checkWidth);
}

Any help would be appreciated

You are not setting `isTop` state as `false` there. You are invoking `isTop` function(?) with `false`. — devserkan, Jun 13 '19 at 14:57
Possible duplicate of [React set state property dynamically](https://stackoverflow.com/questions/37591430/react-set-state-property-dynamically) — Gabriel Donadel Dall'Agnol, Jun 13 '19 at 14:58

nash11 · Accepted Answer · 2019-07-15T18:25:10.177

5

Your syntax seems to be incorrect for setting the isTop state to false. (Source: docs)

Try this instead

this.setState({isTop: false});

edited Jul 15 '19 at 18:25

answered Jun 13 '19 at 14:57

nash11

8,220
3
19
55

score -1 · Answer 2 · edited Jun 13 '19 at 16:35

-1

You need to declare state in constructor

constructor(props) {
    super(props);
    this.state = {isTop: false}
}

To set state

this.setState({
    isTop: "YourValue"
});

To Fetch

this.state.isTop;

Not like you did

this.state.isTop(false);

edited Jun 13 '19 at 16:35

brooksrelyt

3,925
5
31
54

answered Jun 13 '19 at 15:00

paragxviii

220
1
9

There is no need to set constructor – delmin Jun 13 '19 at 15:02

How to set state property to false

2 Answers2