[<< Day 15](../15_Third_Party_Packages/15_third_party_packages.md) | [Day 17 >>](../17_React_Router/17_react_router.md)
- [Higher Order Component](#higher-order-component)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# Higher Order Component
The term higher order component is similar to higher order function in JavaScript. In JavaScript, a higher order function is a function that takes another function as a parameter or return another function.
Similar to higher order function, a higher order component takes a component and return another component.
This definition will make sense with examples. Look at the example below for better understand.
```js
// One way of writing a Higher Order Component(HOC)
import React from 'react'
const higherOrderComponent = (Component) => {
return (props) => {
return
}
}
```
Most of the time third party libraries use higher order component. For instance redux, react-router-dom and material-u use higher order component.
```js
import React from 'react'
const Button = ({ onClick, text, style }) => {
return (
)
}
const buttonWithStyle = (CompParam) => {
const buttonStyles = {
backgroundColor: '#61dbfb',
padding: '10px 25px',
border: 'none',
borderRadius: 5,
margin: 3,
cursor: 'pointer',
fontSize: 18,
color: 'white',
}
return (props) => {
return
}
}
const NewButton = buttonWithSuperPower(Button)
class App extends Component {
render() {
return (
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)
```
The is above example is one use case of Higher Order Component. However, its use case is is more than just styling simple button. It has enormous use cases, it allow us to reuse component and enhance a component with style and functionality. In the coming sections, we will cover React Router and we will use HOC and you will not be surprised when you see one component wrap another component.
# Exercises
## Exercises: Level 1
1. What is higher order function
2. What is Higher Order Component
3. What is the difference between higher order function and higher order component?
4. A higher order component can allow us to enhance a component. (T or F)
## Exercises: Level 2
1. Make a higher order component which can handle all the input type.
## Exercises: Level 3
coming
🎉 CONGRATULATIONS ! 🎉
[<< Day 15](../15_Third_Party_Packages/15_third_party_packages.md) | [Day 17 >>](../17_React_Router/17_react_router.md)
Author:
Asabeneh Yetayeh