Higher Order Component – Reactjs

import Hello from './Hello'
const sum = (a,b) => {
    return a+b;
}
// Higher Order function
const calculator = (type) => {
    if(type == 'sum'){
        return sum;
    }
}

//Higher Order Component
const applyBorder = (WrappedComp) =>{
    return () =>{
        return (
        <div class="border">
            <WrappedComp {...props} />
        </div>)
    }
}

const ModifiedHello = applyBorder(Hello)
class App extends Component {
    constructor(){
        super();
        this.state = {
            name: 'React'
        }
        console.log(calculator('sum')(1,2))
    }

    render(){
        //HOC should not come instide the class render
        return(
        <div>
            <Hello name={this.state.name} />
            <p>Start editing</p>

            <ModifiedHello name="XYZ" />
        </div>
        )
    }
}

render(<App />, document.getElementById('root'))

Leave a Reply

Your email address will not be published. Required fields are marked *