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?

Radix · Accepted Answer · 2018-07-19 20:32:55Z

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 !!

edited Jul 19, 2018 at 20:32

answered Jul 19, 2018 at 19:51

Radix

2,8171 gold badge23 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

GavinBelson Over a year ago

Hmm.. where would the initial options with the series and data etc go?

Radix Over a year ago

@HoosierCoder As I said, you can add any global config while initiating the options. If those are not global (rather component specific config), then just add that in getChartOptions() function. [Edited the answer as well].

GavinBelson Over a year ago

I see.. just gives me a blank chart no matter where I define initial options.. getChartOptions doesn't need a return?

Radix Over a year ago

Yeah, it should. Added that in the answer.

GavinBelson Over a year ago

That still returns a blank chart.. I think it's reading getChartOptions as a blank {}. Did you say you implemented a callback function with just the plain JS version within react?

|

Anshul Bansal · Accepted Answer · 2018-07-19 17:35:14Z

1

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(); 
                              }
                        }
                    }
                }
        }

answered Jul 19, 2018 at 17:35

Anshul Bansal

1,8831 gold badge14 silver badges13 bronze badges

3 Comments

GavinBelson Over a year ago

When I use this approach, in the handleFilter() this.setState({someData: []}) errors out with: "Can't call setState on a component that is not yet mounted." Is there a way to setState in this function?

Anshul Bansal Over a year ago

Can't you put 'options' inside your component itself in the render function. render() { const options = { ... }; return ( <div> <HighchartsReact highcharts={Highcharts} options={options} /> </div> ); }

GavinBelson Over a year ago

Just tried it. Same error.. It only pops up on the actual click event

Collectives™ on Stack Overflow

React Use Function In Javascript Object

2 Answers 2

9 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related