React Use Function In Javascript Object

Question

General question for React interacting with javascript libraries. How can I use a function defined in React inside a javascript object. Is there a jQuery or pure react way?

Example:

I am using a highcharts-react-official library that is just a react wrapper around a JS library.

You would use it like:

const options = {
            plotOptions: {
                series: {
                    point: {
                        events: {
                            click: (e) => { 
                                console.log(e.point.name); console.log(e.point.category); console.log(e.point.y);  
                                this.handleFilter(); //NEED TO CALL THIS FUNCTION
                              }
                        }
                    }
                }
        }

class ChartComponent extends React.Component {
        constructor() {
            super();
            this.state = {
                someData: []            
            };
            this.handleFilter = this.handleFilter.bind(this); //doesn't seem to work
        }

        handleFilter() {
           console.log('Filter Triggered');
           //EDIT -- Needs to be able to setState of this component here:
           this.setState({someData: []});
        }

        render() {
            return (
                <div>
                  <HighchartsReact
                    highcharts={Highcharts}
                    options={options}
                  />
                </div>
            );
        }
}

How can I use handleFilter within that object?

Answer 1

My approach would be to add the click option inside react component. You can get the global options value from JS, then add the click event callback inside React component.

Something this way:

var options = {}; // Any global config can go here

class ChartComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      someData: []            
    };
    this.handleFilter = this.handleFilter.bind(this);
  }

  handleFilter() {
    console.log('Filter Triggered');
    this.setState({someData: []});
  }

  getChartOptions() {
    // Can add any other config here

    if(!options.hasOwnProperty('plotOptions'))
        options.plotOptions = {}

    if(!options.plotOptions.hasOwnProperty('series'))
        options.plotOptions.series = {}

    if(!options.plotOptions.series.hasOwnProperty('events'))
        options.plotOptions.events = {}

    options.plotOptions.series.events = {
      click: (e) => { 
        console.log(e.point.name);
        console.log(e.point.category);
        console.log(e.point.y);  

        this.handleFilter();
      }
    };

    return options;
  }

  render() {
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={this.getChartOptions()}
        />
      </div>
    );
  }
}

PS: Recently, I've implemented the same using HightChart JS library instead of its official React library and it works !!

Answer 2

You can create an instance of the class and call the function on it.

const chartClassInst = new ChartComponent();
const handleFilterFunction = chartClassInst.handleFilter;

const options = {
            plotOptions: {
                series: {
                    point: {
                        events: {
                            click: (e) => { 
                                console.log(e.point.name); console.log(e.point.category); console.log(e.point.y);  
                                handleFilterFunction(); 
                              }
                        }
                    }
                }
        }