Question 211485 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search