I dont know how to fix useSprint using class

November 14, 2021

I received this error :

Line 21:28:  React Hook "useSpring" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks.

I want to make a transition with the opacity and when I click the button appears the image or disappears.

import React, { Component } from 'react';
import { withTranslation } from 'react-i18next';
import { useSpring, config, animated } from "react-spring";

import './Experience.css';



  class Experience extends Component {
      
    constructor(props) {
        super(props);
        this.state = {
            showA: false
        };
      }

    render() {

        // const [showA, setShowA] = useState(false);
        const fadeStyles = useSpring({
          config: { ...config.molasses },
          from: { opacity: 0 },
          to: {
            opacity: this.state.showA ? 1 : 0
          },
        });

        return (
          <div style={{ padding: "15px" }} className="App">
            <h2>Fade Demo</h2>
            <div>
              <animated.div style={fadeStyles}>
              <img  src={`https://a.wattpad.com/useravatar/valery2080.256.603024.jpg)`} alt="hola"/>
              </animated.div>
              <br />
              <button onClick={() => this.setState(val => !val)}>Toggle</button>
            </div>
      
          </div>
        );
    }
  }
  
export default withTranslation()(Experience);

>Solution :

You need to convert the class component to a functional component. Following is the implementation of Experience Component to a functional component.

Note: Make sure to add the CSS file in your implementation.

Following is the codesandbox link for your reference: https://codesandbox.io/s/jolly-wescoff-bnqm4

import React, { useState, Component } from "react";
import { withTranslation } from "react-i18next";
import { useSpring, config, animated } from "react-spring";

const Experience = () => {
  const [showA, setShowA] = useState(false);

  const fadeStyles = useSpring({
    config: { ...config.molasses },
    from: { opacity: 0 },
    to: {
      opacity: showA ? 1 : 0
    }
  });
  return (
    <div style={{ padding: "15px" }} className="App">
      <h2>Fade Demo</h2>
      <div>
        <animated.div style={fadeStyles}>
          <img
            src={`https://a.wattpad.com/useravatar/valery2080.256.603024.jpg)`}
            alt="hola"
          />
        </animated.div>
        <br />
        <button onClick={() => setShowA(!showA)}>Toggle</button>
      </div>
    </div>
  );
};
export default withTranslation()(Experience);