CODEWITHSUNDEEP
javascriptreactjsecmascript-6
sukkis
sukkis

Reputation: 322

How to functionally load new data for multiple React components

I'm true beginner with React/ES6 so my question is pretty simple.

How to functionally refresh multiple Highcharts graphs by multiple fetched data - graphs are now rendered same time with same interval fetched data.

So question is: how to call getData function as many times as component should be rendered, to get each graph to have own data.

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'


const options = {
   table: 'Chart 1',
   chart: {
     type: 'line',
     zoomType: 'xy'
   },
   title: {
     text: 'Chart 1'
   },
   series: [{
     data: []
   }]
 }


 const Value = () =>
   <p>{options.series[0].data[options.series[0].data.length-1]}</p>

 const Highchart = () => 
   <HighchartsReact
     highcharts={Highcharts}
     options={options}
     updateArgs={[true, true, true]}
   />

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {counter: null};
  }

  render() {
    if (this.state.counter) {
      return (
        <Counter 
          counter={this.state.counter}
          onExit={() => this.setState({counter:null})}
        />
      )
    } else {
      return (
        <div>
          <h2>Pick a Counter</h2>
          <button onClick={() => this.setState({counter:'simplest'})}  >Run</button><br/>
        </div>
      )
    }
  }
}

const getData = (opt) => {
  const Url = 'http://80.211.209.99/randArray.php';
  fetch(Url)
  .then(data=>{
    return data.json()
  })
  .then(res=>{
    options.series[0].data = res;
    opt.setState({number: opt.state.number + 1});
    console.log(options);
  })
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {number: 0};
  }
  componentDidMount() {
    this.interval = setInterval(() => {
      console.log(this.state.number, this.props.counter)
      getData(this);
    }, 3000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        <h1>{this.state.number}</h1>
        <button onClick={this.props.onExit}>Exit</button>
        <div className="tableDiv">
          <div className="chartDiv">
            <Highchart />
            <Value />
          </div>
          <div className="chartDiv">
            <Highchart />
            <Value />
          </div>
          <div className="chartDiv">
            <Highchart />
            <Value />
          </div>
          <div className="chartDiv">
            <Highchart />
            <Value />
          </div>
          </div>
      </div>
    )
  }
}
render(<App/>, document.getElementById('root'))

Upvotes: 0

Views: 131

Answers (1)

Nicholas
Nicholas

Reputation: 3784

Assuming that http://80.211.209.99/randArray.php is returning an array of objects.

 class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.url = "http://80.211.209.99/randArray.php";
    this.state = { graphData: [] };
  }
  componentDidMount() {
    fetch(this.url)
      .then(data => {
        return data.json();
      })
      .then(res => {
        this.setState({ graphData: res });
      });
  }

  render() {
    const charts = this.state.graphData.map(graph => (
      <div key={graph.somekindifid} className="chartDiv">
        <Highchart {...passdatathatyouneedfromgraph} />
        <Value {...passdatathatyouneedfromgraph} />
      </div>
    ));

    return (
      <div>
        <h1>{this.state.number}</h1>
        <button onClick={this.props.onExit}>Exit</button>
        <div className="tableDiv">{charts}</div>
      </div>
    );
  }
}
render(<App />, document.getElementById("root"));

Just make sure to pass the correct props to Highchart & Value from graph object.

I hope I understood well.

Upvotes: 1

Related Questions