Filippo Rivolta frivolta

frivolta / react-component.jsx

Created May 27, 2022 15:35

Write better React, compose multiple functional HoCs, Higher-Order Components - Component

	// A page component that just render text
	const App = (props) => {
	return (
	<div className="App">
	<h1>A component</h1>
	</div>
	);
	};
	export default App;

frivolta / react-hoc1.jsx

Created May 27, 2022 15:37

Write better React, compose multiple functional HoCs, Higher-Order Components - Higher Order Component

	export const withUser = (Component) => (props) => {
	// Passing the user that you fetched
	const currentUser = { authtenticated: true, email: "[email protected]" };
	return <Component currentUser={currentUser} {...props} />;
	};

frivolta / react-hoc2.jsx

Created May 27, 2022 15:38

Write better React, compose multiple functional HoCs, Higher-Order Components - Wrapped Component

	// A page component that just render text
	const App = (props) => {
	return (
	<div className="App">
	<h1>A component</h1>
	<h2>User: {props.currentUser.email}</h2>
	</div>
	);
	};
	// Wrapping with withUser function

frivolta / react-hoc3.jsx

Created May 27, 2022 15:41

Write better React, compose multiple functional HoCs, Higher-Order Components - HoC

	export const withTitle = (Component) => (props) => {
	const title = "Custom title";
	return <Component title={title} {...props} />;
	};

frivolta / react-hoc4.jsx

Created May 27, 2022 15:46

Write better React, compose multiple functional HoCs, Higher-Order Components - compose hoc's

	const App = (props) => {
	return (
	<div className="App">
	<h1>A component: {props.title}</h1>
	<h2>User: {props.customUser.email}</h2>
	</div>
	);
	};
	export default compose(withUser, withTitle)(App);