Converting React Class Component to a React Functional Component

Question

I'm trying to convert a React Class Component but have failed after a day full of failed attempts.

The current class component looks like this:

class NeonCursor extends React.Component {
  constructor(props) {
    super(props);

    this.state = { top: 0, left: 0 };
  }

  componentDidMount() {
    document.addEventListener('mousemove', handleMouseMove);
    document.documentElement.classList.add('no-cursor');
  }

  componentWillUnmount() {
    document.documentElement.classList.remove('no-cursor');
    document.removeEventListener('mousemove', handleMouseMove);
  }

  handleMouseMove = (e) => {
    this.setState({
      top: e.pageY,
      left: e.pageX,
    });
  };

  render() {
    return (
      <img
        src="https://code.s3.yandex.net/web-code/react/cursor.svg"
        width={30}
        style={{
          position: 'absolute',
          top: this.state.top,
          left: this.state.left,
          pointerEvents: 'none',
        }}
      />
    );
  }
}

My current attempt looks like this:

function NeonCursor(props) {
  
  const [top, setTop] = React.useState(top: 0);
  const [left, setLeft] = React.useState(left: 0);
  
  React.useEffect(() => {
    document.addEventListener('mousemove', handleMouseMove);
    document.documentElement.classList.add('no-cursor');
    
    return () => {
      document.documentElement.classList.remove('no-cursor');
    document.removeEventListener('mousemove', handleMouseMove);
    }
  }); 
  
  return (
      <img
        src="https://code.s3.yandex.net/web-code/react/cursor.svg"
        width={30}
        style={{
          position: 'absolute',
          top: setTop,
          left: setLeft,
          pointerEvents: 'none',
        }}
      />
    );
  
  function handleMouseMove = (e) => {
    setState({
      setTop: e.pageY,
      setLeft: e.pageX,
    });
  };
  
}

So far, I have done the following steps:

Rename the class component by using function() naming
Remove the class constructor
Replace the state in the constructor by using the useState hook
Pass the ComponentDidMount and ComponentWillUnmount methods to a React.useEffect hook via callbacks.
Replace all this. syntax from the code.
Convert the handleMouseMove method to a function.

However my code is not working and always get a "Script error." message.

What would be the proper approach to this conversion?

I have prepared codepens for: Original code: https://codepen.io/aegisnull/pen/YzLaxQJ My attempt: https://codepen.io/aegisnull/pen/xxjWLXp

Those codepens look the same to me. Am I overlooking something obvious? — k.tten
– k.tten, Commented Sep 30, 2022 at 1:35

edhi.uchiha · Accepted Answer · 2022-09-30 03:04:40Z

1

First, you define the useState hook in wrong way.

const [top, setTop] = React.useState(top: 0);
const [left, setLeft] = React.useState(left: 0);

It should be :

const [top, setTop] = React.useState(0); // 0 is initial/default value of state called top
const [left, setLeft] = React.useState(0);

Second, your handler also have a mistake

function handleMouseMove = (e) => {
    setState({
      setTop: e.pageY,
      setLeft: e.pageX,
    });
};

react fc component is don't have setState that's why before react have a hooks it's called stateless component. And when you define your state [top, setTop],setTop is function to update the value of top. So your handleMouseMove should be:

function handleMouseMove = (e) => {
    setTop(e.pageY)
    setLeft(e.pageX)
};

answered Sep 30, 2022 at 3:04

edhi.uchiha

3742 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leigh.D · Accepted Answer · 2022-09-30 02:55:24Z

The main issues were your use of state and the location of the handleMouseMove function and the handleMouseMove function declaration.

Your state variables are called top and left and these are what you refer to when using the value (as per the style tag in your image). You update these using their associated set function i.e. setTop for updating top or setLeft for updating left (as shown in the handleMouseMove function). Their initial value is defined in the brackets. Since these are meant to store an x or y coordinate they are both numeric types.

The handleMouseMove function needed to move above the return statement to remain in scope and the declaration fixed.

Try this

function NeonCursor(props) {

    const [top, setTop] = React.useState(0);
  const [left, setLeft] = React.useState(0);
  
  React.useEffect(() => {
    document.addEventListener('mousemove', handleMouseMove);
    document.documentElement.classList.add('no-cursor');
    
    return () => {
      document.documentElement.classList.remove('no-cursor');
    document.removeEventListener('mousemove', handleMouseMove);
    }
  }); 

  const handleMouseMove = (e: any) => {
    console.log(e)
    setTop(e.pageY)
    setLeft(e.pageX)
  };
  
  return (
      <img
        src="https://code.s3.yandex.net/web-code/react/cursor.svg"
        alt="cursor"
        width={30}
        style={{
          position: 'absolute',
          top: top,
          left: left,
          pointerEvents: 'none',
        }}
      />
    );
  
  
}

export default NeonCursor;

Collectives™ on Stack Overflow

Converting React Class Component to a React Functional Component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related