CODEWITHSUNDEEP
javascriptreactjsecmascript-6
medev21
medev21

Reputation: 3051

ReactJS - values are returned undefined from a function with parameters

I have a react app and trying to convert the temperatures that are in Kelvin to Fahrenheit. I have a simple setup, but I'm getting undefined values from a function.

//this is the cityweathercomponent
import React, { Component } from "react";

class CityWeather extends Component {

    // (280.89K − 273.15) × 9/5 + 32

    getFahrenheit = (now, minimum, maximum) => {

        let arr = [now , minimum , maximum];
        let result = [];

        for (let value of arr) {
            let num = (value - 273.15) * 9/5 + 32;
            result.push(num);
        }
        let current = result[0];
        let min = result[1];
        let max = result[2];

        console.log(result);

        return {current, min, max};
    };

    render(){

        let cityID = this.props.city;
        let weatherData = this.props.weatherData;

        let currentWeather = weatherData.list[0];
        let condition = currentWeather.weather[0].main;


        let {temp, minTemp, maxTemp} = this.getFahrenheit(currentWeather.main.temp, currentWeather.main.temp_min, currentWeather.main.temp_max);

        console.log(temp, minTemp, maxTemp);

        return(
            <div>
                <h2>condition</h2>
                <p>{condition}</p>

                <br/>
                <h2>current temp</h2>
                <p>{temp}</p>

                <br/>
                <h2>max temp</h2>
                <p>{maxTemp}</p>
                <br/>
                <h2>min temp</h2>
                <p>{minTemp}</p>
            </div>


        );
    }

}

export default CityWeather;

So I'm the temps in this.getFahrenheit function, the result it's expected to be in an object with multiple values.

These params are going in that function and being converted in Fahrenheit. They are stored in an array, and each one is set into variables. In the end, they are being returned as an object {current, min, max}.

But in the console, I'm getting undefined results and not sure what's going on. I see other examples similar to mine and the results are ok - I'm sure I'm missing something in here.

I'm new to ReactJS and specially ES6, so I would like to understand what's going on here and why they are being set as undefined. The end goal is to display the new values in the render showing the temp with the right format. Your help will be appreciated.

Upvotes: 1

Views: 913

Answers (1)

Henry
Henry

Reputation: 15732

The problem is with the following line in your render method:

let {temp, minTemp, maxTemp} = this.getFahrenheit(currentWeather.main.temp, currentWeather.main.temp_min, currentWeather.main.temp_max);

The method this.getFahrenheit returns an object with the keys current, min, and max, but the notation let {temp, minTemp, maxTemp} = this.getFahrenheit(...) looks for the keys temp, minTemp, and maxTemp in the output of this.getFahrenheit. Since these keys are not present in the output, the values of the variables temp, minTemp, and maxTemp all become undefined.

You can either use the same variables names as defined in the keys of the output of this.getFahrenheit (vars: current, min, and max), like this:

let {current, min, max} = this.getFahrenheit(currentWeather.main.temp, currentWeather.main.temp_min, currentWeather.main.temp_max);

or you can rename the variables to the ones you are currently using (vars: temp, minTemp, and maxTemp):

let {current: temp, min: minTemp, max: maxTemp} = this.getFahrenheit(currentWeather.main.temp, currentWeather.main.temp_min, currentWeather.main.temp_max);

See docs for more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

Upvotes: 1

Related Questions