How to change the state of a component on scroll?

Question

JavaScript

There is a Collapse component, with material-ui that hides some content.

<Collapse in={collapsed}>
          <div>Some Content</div>
        </Collapse>

And here is its state, by changing which the component should hide the content.

const [collapsed, setCollapsed] = React.useState(true);

  const handleCollapse = () => {
    setCollapsed(collapsed => !collapsed);
  };

We want the state of the component to change as soon as the user starts scrolling down to hide the content. Does anyone know how to accomplish this?

Answer 1

Yes, you can hang an event handler on a component through the React synthetic event - onWheel