Convert functional component to class component in React

Question

I got an app that is working on react using a class component, i found a code of a feature that i would like to add to my code but it's made using a functional component. The code is here https://codesandbox.io/s/framer-motion-animate-in-view-gqcc8 but the relevant part is this.

import { useInView } from "react-intersection-observer";
import { motion, useAnimation } from "framer-motion";
import "./styles.css";

function Box() {
  const controls = useAnimation();
  const [ref, inView] = useInView();

  useEffect(() => {
    if (inView) {
      controls.start("visible");
    }
  }, [controls, inView]);

I don't know how to add that controls variable in my class component

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      curtains: null,
      loading: true,
      renderNav: false
    };
  }

Should i add it on my state? i don't understand how to make it works in class component

Answer 1

You can't use hooks inside of a class component. What you can do is to write a little wrapper that exposes the ref and controls in a render prop:

const Controls = ({children}) => {
    const controls = useAnimation();
    const [ref, inView] = useInView();

    useEffect(() => {
        if (inView) {
            controls.start("visible");
        }
    }, [controls, inView]);

    return children(ref, controls);
};

Then you can use it like this:

class App extends Component {
    // ...

    render() {
        return (
            <Controls>
                {(ref, controls) => (
                    <motion.div ref={ref} animate={controls}>
                        {/* content */}
                    </motion.div>
                )}
            </Controls>
        );
    }
}

Answer 2

Lets say you have

const functionalComponent=()=>{
  return <h1>Functional componenet</h1>
}

and you want to change it to class component

use this import at the top:

import React,{Component} from "react";

and change your code to something like this:

    Class functionalComponent extends Component{
       state={}
       render(){
           return <h1>functional component</h1>;
         }
    }

your functional component is now changed to class component.

And to use it in your existing class component , you don't need to change your functional component to class component unless you require local state.

with the introduction of react hooks that's also changed ie, you don't have to change your functional component to class component if you plan to use hooks.

In your code : useEffect is a hook and you can't use it inside a class component.

I would recommend simply importing the functional component inside your class component and if you have to pass some value , you can pass it as a prop.

And as far as importing your functional component is concerned:

import React,{Component} from "react";
import Box from "./Box.js";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      curtains: null,
      loading: true,
      renderNav: false
    };
  render(){
  return(<Box/>);
  }
  }

Answer 3

You can also use functional components anywhere like a class component. Btw is also using so no need to worry about the thing that you cannot use state in it.

Use:

<Box props={props}/>