0

I'm trying to create a GOOGLE CHART (PIE) with data coming from an API, however each time I set the date range it's reloading last (chart component) render + new one, so I'd like to know how to fix the code in order to avoid it's happen and just re-render the last one state?

App.js 

render() { 
    return(
   <div className="App">    
   <DateRangerPicker/>
   <ChartPie chartData={this.state.chartData}/>    
   </div>   
)}

DateRangerPicker.js

import App from './App';
class DateRangerPicker extends React.Component {

 constructor(props) {
    super(props);
    this.state = {
        startDate: null,
        endDate: null,
        reload: false

    };
}

handleSelect = ranges => {
 let    startDate = ranges.selection.startDate;
 let    endDate = ranges.selection.endDate;
this.setState({   
    startDate: ranges.selection.startDate = new Date(startDate.getTime() - (startDate.getTimezoneOffset() * 60000 ))
      .toISOString()
      .split("T")[0],
     endDate: ranges.selection.endDate = new Date(endDate.getTime() - (endDate.getTimezoneOffset() * 60000 ))
      .toISOString()
      .split("T")[0],
      reload: true,
      chartData: []
    });

      console.log('state_startDate: '+ this.state.startDate+ 'state_endDate: '+this.state.endDate);
  }

  render(){
    const selectionRange = {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    }       
      
    if(this.state.startDate)   
    return(
    <div className="App">    
    <App 
      reload={this.state.reload}
      startDate={this.state.startDate}
      endDate={this.state.endDate}     
      />
       
      </div>
    )

    return (
        <div className="App">
      <DateRangePicker
        ranges={[selectionRange]}
        onChange={this.handleSelect}
      
     />
     
      </div>
    )
    
  }
}
export default DateRangerPicker;

ChartPie.js

import React from 'react';
import { Chart } from "react-google-charts";

class ChartPie extends React.Component {
  
     constructor(props) {
    super(props);
    this.state = {
        chartData: this.props.charData,
        reload: false
    };
}
componentDidMount() { 
   
this.setState({
  chartData:  this.props.charData
});
}

render(){
  
  if(this.state.reload)
  return 
 
return (
  
<div className="App">

      <Chart
      width={'600px'}
      height={'300px'}
      chartType="PieChart"
      loader={<div>Loading Chart</div>}
      data={this.props.chartData}     
      options={{
        title: 'Work In Progress',
        // Just add this option
        is3D: true,
      }}
      rootProps={{ 'data-testid': '2' }}
    />  
    
  </div> 
)}

}
 
export default ChartPie;
Lais Celio
  • 15
  • 6

1 Answers1

0

use ranges.preventDefault() inside your handleSelect method. this will prevent the browser from reloading.

handleSelect = (event) => {
event.preventDefault();
....

}

https://youtu.be/kdxB1JfTaZ4?t=277

Cheers

Maximilian Haindl
  • 302
  • 3
  • 11
  • it didn't work, I got an error saying ranges.preventDefault() is not a function, so the main problem is that each time I change the dates, the App is rendered below, and its rendering a new chart just above the last one, I'd like to render new charts replacing last one. – Lais Celio Jun 10 '20 at 14:24
  • Here is the completed code: codesandbox.io/s/weathered-mountain-dkxvz?file=/src/App.js – Lais Celio Jun 10 '20 at 17:20