fix: hoc pattern example

[hanstanawi]

export function withStyles(Component) {
  return (props) => {
    const style = {
      color: "red",
      fontSize: "1em",
      // Merge props
      ...props.style,
    };

    return <Component {...props} style={style} />;
  };
}

import { withStyles } from "./hoc/withStyles";

const Text = () => <p style={{ fontFamily: "Inter" }}>Hello world!</p>;
const StyledText = withStyles(Text);

In the Higher Order Component Pattern section, the example of withStyles higher order component and Text component. Since withStyles returns a new component with style props, should Text component receive the props.style as well? Otherwise the paragraph style inside Text component won't be updated.

I think the Text component should look like this.

import { withStyles } from "./hoc/withStyles";

const Text = (props) => <p style={{ fontFamily: "Inter", ...props.style }}>Hello world!</p>;
const StyledText = withStyles(Text);

https://javascriptpatterns.vercel.app/patterns/react-patterns/higher-order-component

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
fm-workshop-2	✅ Ready (Inspect)	Visit Preview	Dec 7, 2022 at 2:59PM (UTC)

[acharist]

Yes it is, the example in the section is incorrect.