I am new to ReactJS. I have created a service that I have called inside componentWillMount() since I want the data as soon as the page loads. Now I want to use the same service when there is a dropdown change and update with the new value. I have called the service inside onChangeDropDown() but it appears that updated value is not rendered correctly.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import config from '../../../../config';
import {
Container, Divider, Accordion, Icon, Transition, Label, Table
} from 'semantic-ui-react';
import Utilities, { Button, PtInput, PtInputShort, PtInputIcon, PtSelect, PtDateInput, PtInputConditionTab, PtInputNextToEachOther } from '../../../../grit-utilities';
import ScrollArea from 'react-scrollbar';
export default class Future extends Component {
constructor(props) {
super(props);
this.state = {
...this.props.futureModel.pavementcondition,
selectedYear: new Date().getFullYear(),
PQI: 'N.A.',
Age: 'N.A.',
Aadt: 'N.A.',
Esals: 'N.A.',
CumEsals: 'N.A.',
pqiArray: []
};
}
getYearOptions = () => {
const yearOptions = [];
for (let i = 0; i < 35; i++) {
yearOptions.push({ key: new Date().getFullYear() + i, value: new Date().getFullYear() + i, label: new Date().getFullYear() + i});
}
return yearOptions;
}
fetchProjectionData = (selectedYear) => {
axios.get(`${config.server}\\fetchFutureData\\${this.props.futureModel.route.id}\\${selectedYear}`).
then((res) => {
if (res.data.result[0]) {
let data = res.data.result[0];
this.setState({
//PQI: data.PSR,
Age: data.Age,
Esals: data.Esals,
Aadt: data.AADT,
CumEsals: data.CumEsal
});
}
});
}
render() {
const yearOptions = this.getYearOptions();
return (
<Container>
<ScrollArea
speed={1}
className={!window.mobileAndTabletcheck() ? "area_desktop" : "area_mobile"}
contentClassName="content"
smoothScrolling={true}>
<PtSelect name="selectedYear" defaultVal={this.state.selectedYear} label="Select Year" options={yearOptions} onChange={this.onChangeDropdown.bind(this)} />
<PtInput disabled placeholder="Not Available" name="PQI" value={this.state.PQI ? this.state.PQI:''} label="PQI - Pavement Quality Index" disabled name="PQI" />
<PtInput disabled placeholder="Not Available" name="Age" value={this.state.Age ? this.state.Age:''} label="Age" disabled name="Age" />
<PtInput disabled placeholder="Not Available" name="Aadt" value={this.state.Aadt ? Math.round(this.state.Aadt) : ''} label="AADT" disabled name="AADT" />
<PtInput disabled placeholder="Not Available" name="Esals" value={this.state.Esals ? Math.round(this.state.Esals):''} label="ESALs" disabled name="ESALs" />
<PtInput disabled placeholder="Not Available" name="CumEsals" value={this.state.CumEsals ? Math.round(this.state.CumEsals) : ''} label="Cumulative ESALs" disabled name="CumESALs" />
</ScrollArea>
</Container>
);
}
/* This function actually gets the PQI value for the current year based on routeId and year from FutureTabView hard table
Date: 09/25/2019
*/
getfirstPQI = () =>{
fetch(`${config.server}/getfirstpqi/`+this.props.futureModel.route.id+`/`+this.state.selectedYear)
.then(response=>response.json())
.then(data=>{
//console.log(data[0]['PSR'])
this.setState({PQI:data[0]['PSR']})
})
}
onChangeDropdown = (e) => {
const { target } = e;
const { name, value } = target;
this.setState({ [name]: parseInt(value) });
this.fetchProjectionData(value);
this.getfirstPQI();
}
componentDidMount() {
this.fetchProjectionData(this.state.selectedYear);
this.getfirstPQI();
}
}
I have done this code and what I am trying to do it as soon as the page loads it should show the value that is being received from the service. Example: the current year is 2019 and as soon as the page loads the value for the year 2019 is being rendered. Now I have a dropdown of years.So when I choose 2020 the value is not getting updated whereas when I choose 2021 it updates the value with the value of 2020. So the updating value is delaying always. How to render the value as soon as there is a change in dropdown?
