higher order components example

Higher Order Components Example in React

The higher order components are the JavaScript functions used to add additional functionality to an existing object. These operations are clean, which means they get the data and return the value according to that data. When the data changes, the higher order components  functions are restarted with a different data entry. If we want to update our return item, we do not need to change the HOC. All we need to do is change the data our work is using.

Read Also :  React Bootstrap Card Example

The Higher Order Component (HOC) wraps up the “normal” component and provides additional data input. It is actually a task that takes one thing and then brings back another real threat.

Let’s look at a simple example to easily understand how this concept works. Higher Order Components Example is an advanced order function used to transfer data only to My Component. This function takes My Component, enlarges it with newData and retrieves advanced features that will be displayed on screen.

Read Also :  Onclick to Get Current Date in React js

Higher Order Components Example

Index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

function Demo() {
  return(
    <App />
  )
}

ReactDOM.render(<Demo />, document.getElementById("root"));

App.js

import React, { Component } from 'react'
import Dharmik from './Dharmik'
import Sanket from './Sanket'

export default class App extends Component {
    render() {
        return (
            <div>
                <Dharmik />
                <Sanket />
            </div>
        )
    }
}

Dharmik.js

import React, { Component } from 'react'
import Coin from './Coin'

class Dharmik extends Component {
    render() {
        return (
            <div>
                <h3 onMouseOver={this.props.hochandelCoin}>Dharmik {this.props.coinname} Coin : {this.props.coin}</h3>
            </div>
        )
    }
}

export default Coin(Dharmik);

Sanket.js

import React, { Component } from 'react'
import Coin from './Coin'

class Sanket extends Component {
    render() {
        return (
            <div>
                <h3 onMouseOver={this.props.hochandelCoin} >Sanket {this.props.coinname} Coin : {this.props.coin}</h3>
            </div>
        )
    }
}

export default Coin(Sanket);

Coin.js

import React, { Component } from 'react'

const NewCoin = (Name) =>{
    class Coin extends Component {

    state = {
        coin : 0
    }

    hochandelCoin = () =>{
        this.setState({coin : this.state.coin + 1});
    }

        render() {
            return (
                <div>
                    <Name coinname="Gold" coin={this.state.coin} hochandelCoin={this.hochandelCoin}/>
                </div>
            )
        }
    }
    return Coin;
}

export default NewCoin;