Unable to Call Components Into my Higher Order Component (HOC)

[MihailoMilic]

HOC code inside SectionWrapper.jsx:

import React from 'react'
import { motion } from 'framer-motion'
import { styles } from '../styles'
import { staggerContainer } from '../utils/motion'
const SectionWrapper = ({Component, idName}) => function HOC(){
        return (
            <motion.section
            variants={staggerContainer()}
            initial='hidden'
            whileInView='show'
            viewport={{once: true, amount:0.25}}
            className={`${styles.padding} max-w-7xl mx-auto relative z-0`}
            >
                <Component/>
            </motion.section>
        )
}

export default SectionWrapper

Applying HOC to my component About inside About.jsx

export default SectionWrapper(About, 'about')

I get an error

react-dom.development.js:28439 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `HOC`.

When I delete <Component/> from the HOC the code works just fine so I assume the problem has something to do with how I passed the About component into the SectionWrapper(), but the youtube video regarding this project has the same code as me right now their works, so I am not sure what is the problem.

[artias13]

HOC isn't the problem, deprecated Tilt from react-tilt is. Here's what you need to do:

1. Just simply uninstall the library by running the command "npm uninstall react-tilt --legacy-peer-deps" and then installing react-parallax-tilt by the command "npm install react-parallax-tilt".

2. Wherever you import {Tilt} from 'react-tilt' change it to this: import Tilt from 'react-parallax-tilt'

3. Don't touch SectionWrapper or exports, they're fine :)

[MihailoMilic]

@ArsenKakasyan Thank you for the comment! I resolved the issue long ago, problem was that I surrounded the arguments of the HOC by curly brackets. I'm new to GitHub so I completely forgot to close the thread. Kind Regards.