0

I'm having an issue with changing the state of a label in a tab when I do scroll on the page. I don't know if componentDidMount() is responsible for it, but I've tried a lot of things and I just can't reach the solution. Here is the demo representing all my problems: https://codesandbox.io/embed/clever-babbage-bzlbe?fontsize=14&hidenavigation=1&theme=dark

If you notice, the shadow loses the transition on the second time you do scroll down, but if you remove the this.setState's, it will be perfect. How this can be possible to solve?

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Pedro Relvas
  • 678
  • 7
  • 19
  • Please include a [mcve] _inside_ your question. – Emile Bergeron Dec 18 '19 at 20:27
  • Avoid DOM manipulations like `document.querySelector("#nav-container")` and instead [use React to change classes, etc.](https://stackoverflow.com/q/30533171/1218980) – Emile Bergeron Dec 18 '19 at 20:29
  • There's also a NPM module that wraps the `IntersectionObserver` for React, namely: [_react-intersection-observer_](https://www.npmjs.com/package/react-intersection-observer). – Emile Bergeron Dec 18 '19 at 20:30

1 Answers1

2

You were using this.setState.scrolled instead of this.state.scrolled and you were assigning true to it instead of checking

(this.state.scrolled == true ? (
              "THIS NEEDS TO CHANGE"
            ) : (
              <Box
                fontFamily="Nunito"
                fontSize={18}
                fontWeight={700}
                color="text.secondary"
                className="text-uppercase pr-4"
              >
                TO THIS
              </Box>
            ))

Doing this should fix your code.

kooskoos
  • 4,622
  • 1
  • 12
  • 29
  • Hi @kooskoos ! Thanks all of it worked out! But I still have problems with the shadow, do you know what can I do? – Pedro Relvas Dec 18 '19 at 20:35
  • Can you explain the problem in detail? I don't understand what's wrong – kooskoos Dec 18 '19 at 20:40
  • If you notice, when you first do scroll there is a transition of a shadow in the tab (check the css for more details of it). But then, when you do the second, third time, there is more transition for the shadow, it appears suddenly very quick. Do you understand? (sorry I got to level up my english skills) @kooskoos – Pedro Relvas Dec 18 '19 at 20:44
  • Is that why you are using `that` instead of `this` with setState, so that it keeps working? – kooskoos Dec 18 '19 at 20:49
  • I need the "that" to the state's work. Try to remove it and see what happens. My problem now is the shadow, I don't know why it loses the transition following the first scroll. @kooskoos – Pedro Relvas Dec 18 '19 at 20:55
  • I got it, makes sense. – kooskoos Dec 18 '19 at 20:58