I have received back from my api the data, which would just be a letter, which is a rating, But when trying to store it into a variable to be used elsewhere or return it, it comes back with undefined and was wondering if there was any solution in order to get this as a variable so I can display it elsewhere? The url has been changed to the variable URL for privacy purposes
propertydetails.js
import './Styling.css';
import React, {useContext} from 'react';
import Nav from './Nav.js';
import { Link } from "react-router-dom";
import Resultbar from './Resultbar';
import { MyContext } from '../MyContext';
var costs_icon = require ('./CostsIcon.png');
var low_energy_lighting_icon = require ('./LowEnergyIcon.png');
var glazing_icon = require ('./GlazingIcon.png');
var co2_icon = require('./CO2.png');
export default function PropertyDetails() {
const {state, setState}=useContext(MyContext);
function PostRequest(co2emissions,lightingvalue,heatingvalue,watervalue,multiglazevalue,amount,selects,rooms,heatedrooms,lowlightingvalue){
const payload={"data":[[1,co2emissions,lightingvalue,heatingvalue,watervalue,multiglazevalue,amount,selects,rooms,heatedrooms,lowlightingvalue]]}
fetch('url', {
method: 'POST', // or 'PUT'
mode:'cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(payload),
})
.then((response) => response.json())
.then((data) => {
console.log('Success:', data);
return data;
})
.catch((error) => {
console.error('Error:', error);
});
}
function Post_Handler()
{
PostRequest(state.co2emissions,state.lightingvalue,state.heatingvalue,state.watervalue,state.multiglazevalue,state.amount,state.selects,state.rooms,state.heatedrooms,state.lowlightingvalue);
};
return (
<body>
<div class ="heading">3. Enter Property Details</div>
<div class= "container">
<Nav/>
<div class = "center">
<div class = "greybox">
<div class = "costs"><img src={costs_icon}/></div>
<div class = "coststexts">Costs</div>
<div class = "lowenergylighting"><img src={low_energy_lighting_icon}/></div>
<div class = "lowenergytexts">Low Energy Lighting</div>
<div class = "glazing"><img src = {glazing_icon}/></div>
<div class = "glazingtext">Glazing</div>
<div class = "co2icon"><img src = {co2_icon}/></div>
<div class = "co2text">CO2</div>
<div class = "heatingcost"><input type ="text" placeholder='£'onChange={(event) => {setState(prev=>({...prev,'heatingvalue':parseInt(event.target.value)}))}}/></div>
<div class = "lightingcost"><input type ="text" placeholder='£' onChange={(event) => {setState(prev=>({...prev,'lightingvalue':parseInt(event.target.value)}))}}/></div>
<div class = "watercost"><input type ="text" placeholder='£' onChange={(event) => {setState(prev=>({...prev,'watervalue':parseInt(event.target.value)}))}}/></div>
<div class = "heatingcosttext">Heating</div>
<div class = "lightingcosttext">Lighting</div>
<div class = "watercosttext">Water</div>
<div class = "multiglaze"><input type ="text" placeholder='%' onChange={(event) => {setState(prev=>({...prev,'multiglazevalue':parseInt(event.target.value)}))}}/></div>
<div class = "multiglazetext">Multiglaze</div>
<div class = "percentage"><input type ="text" placeholder='%' onChange={(event) => {setState(prev=>({...prev,'lowlightingvalue':parseInt(event.target.value)}))}}/></div>
<div class = "co2"><input type = "text" placeholder= 'tonnes'onChange={(event) => {setState(prev=>({...prev,'co2emissions':parseInt(event.target.value)}))}}/></div>
<div>heating is:{state.heatingvalue}</div>
<div> lighting is: {state.lightingvalue}</div>
<div> water is: {state.watervalue}</div>
<div> multiglaze is: {state.multiglazevalue}</div>
<div> low energy lighting is: {state.lowlightingvalue}</div>
<div> CO2 is: {state.co2emissions}</div>
<Resultbar />
</div>
<Link to = "/Energy">
<div class = "backbutton"><button>BACK</button></div>
</Link>
<div className='Result'><button onClick={Post_Handler}>GET RESULT</button></div>
</div>
</div>
</body>
);
}
