How to add a React method to an object outside of React

Question

So, really straightforward issue here. I am using React Highcharts Official and for the options attribute on ReactHighcharts I want to import graphOptions from another file.

<ReactHighcharts highcharts={Highcharts} options={graphOptions} />

Now, this would be easy however on the file I'm trying to import, I have a method called this.addData().

export const graphOptions = {
    title: {
        text: 'title '
    },
    yAxis: {
        title: {
            text: 'Points'
        }
    },
    xAxis: {
         title: {
            text: 'Date'
        }
     },
    series: this.addData()
};

Ok, so I know I can have this file in my react render area but is there a way to import this there if I have a this statement on my series code as shown above?

Umair Farooq · Answer 1 · 2018-12-10T11:23:17.017

1

One way could be to export function i.e getGraphOptions instead of object and then after importing, bind it with this of current react class.

export const function getGraphOptions() {
   return {
    // object
    series: this.addData()
}

and in the react file.

import { getGraphOptions } from './...'
this.getGraphOptions = getGraphOptions.bind(this);

edited Dec 10 '18 at 11:23

answered Dec 10 '18 at 10:58

Umair Farooq

1,763
13
16

score 0 · Answer 2 · answered Dec 11 '18 at 11:01

You can simply assign new property to graphOptions object in constructor, already having access to the appropriate method:

import options from "./options.js";

class App extends React.Component {
  constructor(props) {
    super(props);

    options.series = this.addData();
    this.state = {
      options: options
    };
  }

  addData() {
    return [
      {
        data: [1, 2, 3]
      }
    ];
  }

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

Live demo: https://codesandbox.io/s/m7xvq7z468

How to add a React method to an object outside of React

2 Answers2