higher order components in react 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);
Example 3: high level components react
import React, { useState } from 'react';
class WelcomeName extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>
}
}
function HighHookWelcome() {
const [name ,setName] = useState("Default Name Here");
return(
<WelcomeName
name={name}
/>
);
}