Fix the following React component: Scroller

Question

Here is a component supposed to display the number of pixels scrolled vertically.

class Scroller extends React.Component{
  constructor(props){
    super(props);
    this.state={distance: window.scrollY};
    this.updateDistance= this.updateDistance.bind(this);
  }
  
  updateDistance(){
    this.setState({distance: window.scrollY});
  }
  
  componentDidMount(){
    window.addEventListener("scroll", this.updateDistance);
  }

  render(){
    return(
     <div style="height: 5000px">
       <p style="position: fixed; top: 5px; left: 5px">
          Scrolled{this.state.distance} pixels.
       </p>
     </div>
    );
  }
}

What is(are) the problem(s)?

Scrolled{this.state.distance} pixels.

); } } ``` What is(are) the problem(s)?

Accepted Answer

Styles are declared as strings.

Accepted Answer

Calling `this.updateDistance` at each` scroll` event can impact performance.

Accepted Answer

The component will leak an event listener when removed from the DOM.

Answer

Any.

Question from the React (legacy) test

Fix the following React component: Scroller