Higher Order Components in React (HOC)

Mar 10, 2023 - 5 min read

Example of a Higher Order Component:

with-logging.tsx

import React from "react";

const Label = ({ name, color }: { name: string, color: string }) => {
  return (
    <div>
      <p style={{ color: color }}>Hello {name}</p>
    </div>
  );
};
const withHey = (Component: React.FC, label: string) => {
  return (props: any) => {
    const newProps = { [label]: "Hey" + props[label] };
    return <Component {...newProps} {...props} />;
  };
};
const SayHey = withData(Label, { label: "name" });

export const DemoHOC = () => {
  return <RedTitle size="20px" />;
};

In this example, we have a higher-order component that takes a component and a label as arguments. The higher-order component returns a new component that adds "Hey" to the value of the label prop. We then use the higher-order component to create a new component called SayHey that adds "Hey" to the value of the name prop.