HOC function is not recognising section wrapper when called in About.jsx , getting error.

[Kinjal Jain]

HOC function is not recognising section wrapper when called in About.jsx , getting error like --- 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.

Also where are we calling HOC function , we have just defined the HOC function in SectionWrapper.jsx.

CAn anyone please help me out here ?

[Kinjal Jain]

Hey I resolved the issue, we actually need to return HOC function in SectionWrapper.js like this -- import { motion } from 'framer-motion';
import { styles } from '../styles';

import { staggerContainer } from '../utils/motion';

const SectionWrapper = (Component, idName) => {
console.log('inside section wrapper');
console.log(Component);
console.log(idName);

const HOC = () => (
    <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`}>
        <span className='hash-span' id={idName}>
            &nbsp;
        </span>
        <Component/>
    </motion.section>
);

return HOC;

};

export default SectionWrapper;