CODEWITHSUNDEEP
reactjssetstate
ray.one
ray.one

Reputation: 69

how to set values for variables inside setState if those variables are null

Here I set default values for the variables inside the state > currentWeather like as following example, then again i set dynamic values for those variables to work for user search terms, when app open static values are not displayed, how I can fix that? 

class App extends Component {
  state = {
    currentWeather: {
      currentLocation: 'Colombo',
      currentDate: new Date(),
      currentTempreture: 28.3,
      currentWeatherLabel: 'rain',
      currentWind: 1.5,
      currentHumidity: 60
    }
  };

  getWeather = async e => {
    this.setState({
      currentTempreture: data.main.temp,
      currentLocation: data.name,
      currentWind: data.wind.speed,
      currentHumidity: data.main.humidity,
      currentWeatherLabel: data.weather[0].description
    });
  };

  render() {
    return (
      <div id="bsec" className="b-color body-sec">
        <div className="main-wrapper">
          <MainWidget
            location={this.state.currentLocation}
            date={this.state.currentDate}
            tempreture={this.state.currentTempreture}
            label={this.state.currentWeatherLabel}
            wind={this.state.currentWind}
            humidity={this.state.currentHumidity}
            pressure={this.state.currentPressure}
          />
        </div>
      </div>
    );
  }
}

Upvotes: 0

Views: 81

Answers (5)

ManBearPig
ManBearPig

Reputation: 45

as julekgwa mention you will need to validate your data or your application will break, the following example makes use of the get method of lodash to accomplish the result:

this.setState({
 currentTempreture: _.get(data, 'main.temp', "default value"),    
 currentLocation: _.get(data, 'name', "default value"),
 currentWind: _.get(data, 'wind.speed', "default value"),
 currentHumidity: _.get(data, 'main.humidity', "default value"),
 currentWeatherLabel: _.size(data.weather) > 0 ?  data.weather[0].description : [],
});

Upvotes: 1

Junius L
Junius L

Reputation: 16142

You need to do some data validation as data.main.temp will break your application if main is undefined or data is null.

this.setState({

  currentTempreture: data && data.main && data.main.temp || 'default value',    
  currentLocation: data && data.name || 'default value',
  currentWind: data && data.wind && data.wind.speed || 'default value',
  currentHumidity: data && data.main && data.main.humidity || 'default value',
  currentWeatherLabel: data && data.wat && data.weather[0].description || 'default value',

});

For example:

with data validation

const data = {}

console.log(data && data.main && data.main.temp || 'default value')

Without data validation

const data = {}

console.log(data.main.temp ? data.main.temp : 'default value')

Upvotes: 4

Prithviraj Sahu
Prithviraj Sahu

Reputation: 214

So, you want to update the state variables if they are null. You can try this - 

this.setState(state => ({
  currentTempreture: state.currentTempreture === null ? data.main.temp : state.currentTempreture,    
  currentLocation: state.currentLocation === null ? data.name : state.currentLocation,
  currentWind: state.currentWind === null ? data.wind.speed : state.currentWind,
  currentHumidity: state.currentHumidity === null ? data.main.humidity : state.currentHumidity,
  currentWeatherLabel: state.currentWeatherLabel === null ? data.weather[0].description : state.currentWeatherLabel,
}));

Upvotes: 1

Thomas Vu
Thomas Vu

Reputation: 195

Given that your state is an object, so that you can do like: 

if (Object.keys(your state).length) == 0 { 
      // Do something here 
}

Or try with your.state === null

Upvotes: -1

Kishan Jaiswal
Kishan Jaiswal

Reputation: 664

this.setState({
 currentTempreture: data.main.temp ? data.main.temp:"static values",    
 currentLocation: data.name ? data.name :"static values",
 currentWind:data.wind.speed ? data.wind.speed : "static values",
 currentHumidity: data.main.humidity?data.main.humidity:"static values",
 currentWeatherLabel: data.weather.length>0 ? 
 data.weather[0].description : [],

});

like this you can set

Upvotes: 1

Related Questions