How to pass props to a component when it's wrapped in a Higher Order Component?

Question

I have the following code files and want to pass the props to a component wrapped inside a higher-order component. I need to pass props from the index page, but the components are wrapped inside two higher-order components. When I pass props to the component in index.js and console.log props in About.jsx it logs an empty object.

index.js

import { Header, Footer, Work, Skills, Testimonial, About } from "../container";

import { Navbar } from "../components";
import { client } from "../services/client";

export default function Home(props) {
  console.log(props.abouts);
  return (
    <div className="app">
      <Navbar />
      <Header />
      <About abouts={props.abouts} />
      <Work />
      <Skills />
      <Testimonial />
      <Footer />
    </div>
  );
}

/// I get the props from getStaticProps and I've tested the props, it actually fetches the data.

About.jsx

    import React, { useState, useEffect } from "react";
    import { motion } from "framer-motion";
    import { Profile } from "./About.styled";
    import { urlFor, client } from "../../services/client";
    import { AppWrap, MotionWrap } from "../../wrapper";
    
    const About = (props) => {
      const [abouts, setAbouts] = useState([]);
    

// This useEffect is just for testing purposes, I need to get the data through props from index.js which gets it from getStaticProps()
      useEffect(() => {
        const query = "*[_type == 'abouts']";
        client.fetch(query).then((data) => setAbouts(data));
      }, []);
      console.log(props);
      return (
        <>
          <h2 className="head-text">
            I know that
            <span> Good Apps</span>
            <br />
            means
            <span> Good Business</span>
          </h2>
          <Profile className="app_profiles">
            {abouts.map((about, index) => (
              <motion.div
                whileInView={{ opacity: 1 }}
                whileHover={{ scale: 1.1 }}
                transition={{ duration: 0.5, type: "tween" }}
                className="item"
                key={about.title + index}
              >
                <img src={urlFor(about.imgUrl)} alt={about.title} />
                <h2 className="bold-text" style={{ marginTop: "20px" }}>
                  {about.title}
                </h2>
                <p className="p-text" style={{ marginTop: "10px" }}>
                  {about.description}
                </p>
              </motion.div>
            ))}
          </Profile>
        </>
      );
    };
    export default AppWrap(
      MotionWrap(About, "app__about"),
      "about",
      "app__whitebg"
    );

motionWrap.js

import React from "react";
import { motion } from "framer-motion";

const MotionWrap = (Component, className, hello) =>
  function HOC() {
    return (
      <motion.div
        whileInView={{ y: [100, 50, 0], opacity: [0, 0, 1] }}
        transition={{ duration: 0.5 }}
        className={`${className} app__flex`}
      >
        <Component hello={hello} />
      </motion.div>
    );
  };

export default MotionWrap;

appWrap.js

import React from "react";
import { NavigationDots, SocialMedia } from "../components";

const AppWrap = (Component, idName, classNames) =>
  function HOC() {
    return (
      <div id={idName} className={`app__container ${classNames}`}>
        {/* <SocialMedia /> */}
        <div className="app__wrapper app__flex">
          <Component />
          {/* <div className="copyright app__flex" style={copyrightStyle}>
            <p className="p-text">@2020 Nasyx</p>
            <p className="p-text">All rights reserved</p>
          </div> */}
        </div>
        <NavigationDots active={idName} />
      </div>
    );
  };
export default AppWrap;

I want to pass props from index.js but when I console log props in About.jsx it is an empty object.

/////////////// ** UPDATE **////////// I managed to get the props by doing the following code changes

const MotionWrap = (Component, className) =>
  function HOC(...props) {}

** and **

const AppWrap = (Component, idName, classNames) =>
  function HOC(...props) {}

Reference: How to Wrap One React Component into Another

Answer 1

I think you are doing wrong in index.js file, you are passing abouts from index.js which you have assigned a value of props.abouts in the same file where it might be empty. Also you are not using abouts from props anywhere in your code but your are fetching the same via fetch which you are also not passing as props to any component!!!