CODEWITHSUNDEEP
javascriptreactjs
user10224616
user10224616

Reputation:

can't render in else statement

I'm new in ReactJs that's why don't judge me. I was practicing to write down some small apllication in ReactJs.Main purpose of my application it gets json data from weather api and should show it in web browser. But when I searched existed city it works and properly shows into browser If I check with blank data I couldn't make dissapear my previous data from browser. How I could make it dissapear if searching value is zero.

my Main App.js

import React from "react";
import Forms from "./components/Form";
import Weather from "./components/Weather"
class App extends React.Component{
    state = {
        temp:undefined,
        city:undefined,
        country:undefined,
        sunrise:undefined,
        sunset:undefined,
        error:undefined
    };

  gettingWeather = async (e) =>{
        e.preventDefault();
        const city = e.target.elements.city.value;
        if(city)
        {
        const api = await
        fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=aea3bfae005c93e040ec823207545968`);
        const data = await api.json();
        if(data.cod != "404")
        {
        var date = new Date();
        date.setTime(data.sys.sunrise);
        var sunS = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
        this.setState({
            temp:data.main.temp,
            city:data.name,
            country:data.sys.country,
            sunrise:sunS,
            error:""
        });
        }
        }else{
            this.city = undefined;
            console.log("PUSTOY");
            this.setState = {
                temp:undefined,
                city:undefined,
                country:undefined,
                sunrise:undefined,
                sunset:undefined,
                error:undefined
            };
        }
  }
  render(){
      return (
          <div>
            <Forms weatherMethod = {this.gettingWeather}/>
              <Weather
              temp = {this.state.temp}
              city = {this.state.city}
              country = {this.state.country}
              sunRise = {this.state.sunrise}
              />
          </div>
      );
    }
}
export default App;

I get click from From.js and shows up in Weather form

Form.js

import React,{Component} from "react";

class Yozuvla extends Component{
    render(){
        return(
            <form onSubmit={this.props.weatherMethod}>
                <br/>
                <input type="text" name="city" placeholder="Tashkent"/>
                <button>Get weather</button>
            </form>
        );
    }
}
export default Yozuvla;

My broswer shows view in here 

import React from "react"

class Weather extends React.Component{
    render(){
        if(this.props.city){
            console.log(this.props.city.length);
            return(
              <div>
                               <p>Temperatura:  {this.props.temp}</p>
                               <p>Shahar:  {this.props.city}</p>
                               <p>Davlat:  {this.props.country}</p>
                               <p>Kun otishi:  {this.props.sunRise}</p>
              </div>
            );
        }else{
            return(
                <div>
                    <h1>BLANK for begin</h1>
                </div>
            );
        }
    }
}
export default Weather;

For begin BLANK for begin will show up but when I search with existed city this BLANK for begin** and I try with not existed city this p tegs never goes to dissapear. What I can do here ??

Upvotes: 1

Views: 82

Answers (3)

Sylens
Sylens

Reputation: 1177

this.setState is used incorrectly. It is not an object of this. Its a function, and here is how you must use it.

this.setState({someState: newValue});

Setting the state from the setState will trigger the render function. With what you have done, it will not trigger the render function.

Read up more about this: https://css-tricks.com/understanding-react-setstate/

Upvotes: 0

Jon B
Jon B

Reputation: 2824

Here's a super simplified example of using a ternary statement in jsx passing in a City Object to Weather https://codesandbox.io/s/red-cache-kxv7c?fontsize=14

Upvotes: 0

Asaf Aviv
Asaf Aviv

Reputation: 11770

In your else block inside gettingWeather You are reassigning this.setState to an object instead of calling it

this.setState = { // <------ reassigning instead of calling
    temp: undefined,
    city: undefined,
    country: undefined,
    sunrise: undefined,
    sunset: undefined,
    error: undefined
};

Call it instead

this.setState({
    temp: undefined,
    city: undefined,
    country: undefined,
    sunrise: undefined,
    sunset: undefined,
    error: undefined
});

Upvotes: 2

Related Questions