Consider the below React component

import React, { Component } from 'react';

class Test extends Component{
    someFunction(){
       console.log('somefunction called');
    }

    render(){
        return(
         <button onclick={this.someFunction}>Console Log</button>
    )}
}

If you try to call this.someFunction will be undefined. This can be solved in two ways

Using bind functions

By using bind, the function someFunction is binded to the instance of class and can be accessed using this

import React, { Component } from 'react';

class Test extends Component{
    constructor(){
       this.someFunction = this.someFunction.bind(this);
    }
    someFunction(){
       console.log('somefunction called');
    }

    render(){
        return(
         <button onclick={this.someFunction}>Console Log</button>
    )}
}

Using arrow functions

We can also use arrow functions and avoid using bind.

import React, { Component } from 'react';

class Test extends Component{
    someFunction = () => {
       console.log('somefunction called');
    }

    render(){
        return(
         <button onclick={this.someFunction}>Console Log</button>
    )}
}