how to make higher order component in reactjs code example
Example 1: how to pass props to higher order component
just pass your props as normal to the WrappedComponent
import React from 'react';
import WrappedComponent from "./WrappedComponent";
export default function App() {
return (
<div>
<WrappedComponent name="CreatorOfCode" />
</div>
)
}
import React from 'react';
function WrappedComponent({}) {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
export default ComponentEnhancer(WrappedComponent)
import React from 'react';
import PropTypes from 'prop-types';
export default (WrappedComponent) => {
const hocComponent = ({ ...props }) => {
console.log(props.name)
return <WrappedComponent {...props}
}/>
hocComponent.propTypes = {};
return hocComponent;
}
Example 2: Higher order components (HOC) react native
const EnhancedComponent = higherOrderComponent(WrappedComponent);