Styles Not Applied in React App using Higher-Order Component (HOC)

Question

I'm currently learning about Higher-Order Components (HOCs) in React, and I'm facing an issue where I can see the buttons in the browser, but the styles I'm trying to apply using an HOC are not being rendered. I've provided my code below to give context. Can someone help me figure out what's going wrong?

Description:

I'm building a simple React application with two buttons, 'Add' and 'Delete', and I'm attempting to enhance these buttons with custom styles using a Higher-Order Component (HOC).

Here's my project structure and code:

App.js

import './App.css';
import DeleteButton from './components/DeleteButton';
import AddButton from './components/AddButton';

function App() {
  return (
    <div className="App">
      <AddButton />
      <DeleteButton /> 
    </div>
  );
}

export default App;

withEnhancedBtn.js

// HOC Function
const withEnhancedBtn = (WrappedButton) => {
  // HOC Component
  const EnhancedButton = (props) => {
    const modifiedProps = {
      ...props,
      style: { color: "blue", fontSize: 150 },
    };
    return <WrappedButton {...modifiedProps} />;
  };
  return EnhancedButton;
};

export default withEnhancedBtn;

AddButton.js

import React from "react";
import withEnhancedBtn from "./withEnhancedBtn.js";

const AddButton = () => {
  return <button onClick={() => alert("Added")}>Add</button>;
};

export default withEnhancedBtn(AddButton);

DeleteButton.js

import React from "react";
import withEnhancedBtn from "./withEnhancedBtn.js";

const DeleteButton = () => {
  return <button onClick={() => alert("Deleted")}>Delete</button>;
};

export default withEnhancedBtn(DeleteButton);

As you can see, I'm using the withEnhancedBtn HOC to apply custom styles to my buttons. However, despite the fact that the buttons are displayed in the browser, the styles (color: blue and fontSize: 150) are not being applied.

I'm seeking assistance in identifying the issue and understanding why the styles are not working as expected. Any insights or guidance would be greatly appreciated!

To Isolate the issue I tried applying the styles to the button directly which worked fine.

Answer 1

You are almost there.

withEnhancedBtn is indeed enhancing your component, it's taking a functional component (function) and extending its props by adding the style prop.

If you conosle.log your props in DeleteButton for example then you will see that you receive a style prop. The main problem is that you are not doing anything with the enhanced props that you receive from the HOC.

In short, what remains is in your DeleteButton to take the props you receive and pass them down to the elements that you have in the return statement/render method.

e.g.

const DeleteButton = (props) => {
  return <button style={props.style} onClick={() => alert("Deleted")}>Delete</button>;
};

withEnhancedBtn(DeleteButton);

or if you want to pass all the props to the button

const DeleteButton = (props) => {
  return <button {...props} onClick={() => alert("Deleted")}>Delete</button>;
};

withEnhancedBtn(DeleteButton);