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

Question

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 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 really not sure what is the problem.

Answer 1

try this

1. create a new file called (name it whatever you want) index.js within this file write the following

import { SectionWrapper } from "./SectionWrapper";


export {SectionWrapper};

and instead of exporting it default try

export const SectionWrapper = ({Component, idName}) => function HOC(){ }

i hope this works

Answer 2

I found the error. The arguments of SectionWrapper should not have been within curly brackets.