Video Course

Getting Started with React: Lesson 10 of 14

Conditionally Displaying Components

Up Next

Functional Components

Autoplaying in 7 seconds!

Cancel

Let's make our final component: the CurrentDay component. Create a new file at src/components/CurrentDay.js. Put the following in it.

import React, { Component } from 'react';

class CurrentDay extends Component {
  render() {
    const { city, day: { temp, weather, pressure, humidity, speed, deg } } = this.props;
    const w = weather[0];

      return (
        <div className="current-day">
          <h1 className="day-header">{city.name}</h1>
          <div className="weather">
              <p>
                <img src={`http://openweathermap.org/img/w/${w.icon}.png`} alt={w.description}/>
                {w.description}
              </p>
            </div>
          <div className="details flex-parent">
            <div className="temperature-breakdown">
              <p>Morning Temperature: {temp.morn}&deg;F</p>
              <p>Day Temperature: {temp.day}&deg;F</p>
              <p>Evening Temperature: {temp.eve}&deg;F</p>
              <p>Night Temperature: {temp.night}&deg;F</p>
            </div>
            <div className="misc-details">
              <p>Atmospheric Pressure: {pressure} hPa</p>
              <p>Humidity: {humidity}%</p>
              <p>Wind Speed: {speed} mph</p>
            </div>
          </div>
        </div>
      );
  }
}

export default CurrentDay;

That seems like alot of code, but it's actually very simple. It's nothing we haven't seen already. We have a component with a render method. We are pulling a bunch of stuff out of props and then grabbing the first piece of weather data out of that array. Lastly, we are returning a bunch of HTML where we are using the above data and outputting it to the screen. Nothing crazy.

Now we need to make sure this component is in our App. Import it at the top and create an instance in it's render method, pulling the correct props out of state and passing them to our CurrentDay.

import CurrentDay from './CurrentDay';

...

    const { dates, city, selectedDate } = this.state;

    return (
      <div className="app">
        <ZipForm onSubmit={this.onFormSubmit} />
        <WeatherList days={dates} onDayClicked={this.onDayClicked} />
        <CurrentDay day={dates[selectedDate]} city={city} />
      </div>
    );

Let's view this in the browser. Hmm...everything is broken! This is because when the application comes up, we haven't clicked on a day yet, meaning selectedDate isn't set yet. Then, in CurrentDay, when we try to pull data out of the day that is passed, the day is actually null. So everything explodes!

This is easy to fix though. We need to only show the component if this.state.selectedDay is not null. Here's one solution. Add a method that checks this variable and returns null for the component if this.state.selectedDay isn't set. React will ignore a component if it evaluates to null.

getCurrentDayComponent() {
  const { dates, city, selectedDate } = this.state;

  if (this.state.selectedDate === null) {
    return null;
  }

  return <CurrentDay day={dates[selectedDate]} city={city} />
}

...

    const { dates } = this.state;

    return (
      <div className="app">
        <ZipForm onSubmit={this.onFormSubmit} />
        <WeatherList days={dates} onDayClicked={this.onDayClicked} />
        {this.getCurrentDayComponent()}
      </div>
    );

View this in the browser, and you will see that everything works! this solution is a little verbose though. It's alot more code than is really necessary. We can utilize JavaScript's ability to short-circuit conditionals and make this code alot smaller yet still readable. Remove the getCurrentDay method and make render look like below.

render() {
  const { dates, city, selectedDate } = this.state;

  return (
    <div className="app">
      <ZipForm onSubmit={this.onFormSubmit} />
      <WeatherList days={dates} onDayClicked={this.onDayClicked} />
      {selectedDate !== null && <CurrentDay day={dates[selectedDate]} city={city} />}
    </div>
  );
}

Instead of making a call to a method on this class, we instead test to see if selectedDate is not equal to null. If it is, this will evaluate to false and JavaScript will never will never render the CurrentDay component. It accomplishes the same thing as before but in smaller, more readable code.

Our application is complete! Yay! Using React makes creating an application so easy. However, there's still some room for improvement. Next, we will refactor some of our components into functional components.

Alex Sears

2 posts

Developing is not only my job but also my passion. I love to teach myself new things as much as I love teaching others. The more people we get involved in this little thing we call "web development," the better we can make it. I mean, we always need more cat videos, right?