Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
8.2: Higher-Order Components

Introduction

Use higher-order components like modular wrappers for your app logic. We already saw Higher Order Components when we talked about Error Boundaries, but an HOC is actually any component that is passed another component as a prop / argument.

Example

We'll create a Higher Order Modal component that we can use anywhere. When we want any set of elements to appear inside a modal we can pass that Modal component function the component we want it to surround.

App.js

On line 9 we pass our HOC the component we want it to surround, Message.
1
import "./styles.css";
2
import Modal from './components/Modal/Modal.jsx';
3
import Message from './components/Message.jsx';
4
​
5
export default function App() {
6
return (
7
<div className="App">
8
<h1>Hello HOC Example</h1>
9
{Modal(Message)}
10
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero leo, faucibus ac eleifend et, commodo sit amet est. Aliquam gravida ut turpis ac ornare. Cras pharetra ornare ultrices. Integer vestibulum augue non est scelerisque fermentum. Aenean ipsum nibh, rutrum in hendrerit ac, aliquet in est. Nullam tincidunt nibh nunc, vitae viverra velit viverra vitae. Nam dictum urna eu purus blandit interdum. Sed sed convallis velit. In lobortis aliquam felis, quis convallis eros tincidunt faucibus. Morbi laoreet congue ante non posuere.</p>
11
</div>
12
);
13
}
Copied!

Message.jsx

Message is just a div with text. We want this text inside the modal.
1
export default function Message() {
2
return (
3
<div>
4
i meant to do that now i shall wash myself intently. Your pillow is now my pet bed. Kitty poochy catching very fast laser pointer the dog smells bad but damn that dog lick the other cats, yet cats are a queer kind of folk yet lick the plastic bag. Nyan fluffness ahh cucumber! spill litter box.
5
</div>
6
);
7
}
Copied!

Modal.jsx

Modal component has it's own state that determines if it is open or not.
1
import "./styles.css";
2
import { useState } from 'react';
3
​
4
export default function Modal(ChildComponent) {
5
const [isVisible, setIsVisible] = useState(true);
6
if (isVisible) {
7
return (
8
<div className="modal-container">
9
<div className="modal">
10
<button className="modal-close" onClick={ () => setIsVisible(false) }>
11
x
12
</button>
13
<ChildComponent/>
14
</div>
15
</div>
16
);
17
} else {
18
return (
19
<div>
20
<button onClick={ () => setIsVisible(true) }>
21
Open Modal
22
</button>
23
</div>
24
);
25
}
26
}
Copied!
1
.modal-container {
2
width: 100%;
3
height: 100vh;
4
position: absolute;
5
top: 0;
6
}
7
.modal {
8
margin: 30px auto;
9
padding: 30px;
10
background-color: white;
11
width: 70%;
12
height: 70vh;
13
position: relative;
14
}
15
.modal-close {
16
position: absolute;
17
top: 5px;
18
right: 5px;
19
}
Copied!
See a full working example here: https://codesandbox.io/s/floral-lake-3ppbd​

Further Reading

Read more about HOCs in official React documentation here.
Last modified 2mo ago