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

Try to `console.log(props);` inside the `useEffect` of the `About` component — lpizzinidev, May 04 '22 at 07:28
You may want to add the solution that worked for you as an answer to your own question. — juliomalves, May 05 '22 at 06:50

tur461 · Answer 1 · 2022-05-04T08:26:09.353

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!!!

edited May 04 '22 at 08:26

answered May 04 '22 at 08:10

tur461

11
2

Thanks, useEffect was just for testing purposes, I actually forgot to add the getStaticProps method to my question. – Nasyx Nadeem May 04 '22 at 08:13
1

Updated it now. – Nasyx Nadeem May 04 '22 at 08:19
1

Are you sure that abouts is a key in the props object itself which you get from getStaticProps() – tur461 May 04 '22 at 08:26
1

Yes, 100%, I checked it with the console.log – Nasyx Nadeem May 04 '22 at 08:27
what is the output of console log in index.js – tur461 May 04 '22 at 08:31
console.log(props.abouts); Array(4) [ {…}, {…}, {…}, {…} ] – Nasyx Nadeem May 04 '22 at 08:35
pass props here as well export default AppWrap( MotionWrap(About, "app__about"), "about", "app__whitebg" ); then here as well – tur461 May 04 '22 at 08:42
You can not access the props outside the react component – Nasyx Nadeem May 04 '22 at 08:43
i think you are not using proper About component in index.js as you are not exporting the about from within About.jsx as a component – tur461 May 04 '22 at 08:45

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

1 Answers1