What we want to do first is throw in Change Date. You'll see in our chrome application that things are a little bit off.

So the first thing that I want to do is go into clock.scss, and change the grid-column-gap to 60px. This is still going to be a little bit off. It's not going to look 100% the same across browsers. So what I want to do is have some videos of the end of building this application that will fix some bug changes across browsers.

It looks fine, there are just really subtle differences. Like the colors look different across browsers. They interpret them differently. I just want to make sure that you know that between FireFox and Chrome it is going to be slightly different. It's never going to be 100% the same, but we will make it as close as we can.

Anyway, let's get into our video today and what's make it and show when we hit generate. We can do this by going into our code, closing out of our terminal and of all of our files. Then open clock.js. What we want to do is somehow render this only when we click generate.

If you go into picker.js, I'm going to close my style folder, so we have our Picker and our Button. We need to somehow have this have a function that will tell us what is going to happen. So let's say:

button.js

import React from 'react';

const Button = (title) => {
    return (
        <button className="button" onClick={() => console.log('trying to handle generate countdown')}>
            {title}
        </button>
    )
}

export default Button;

Save that, let's go back to our app, and let's open up our console. Go to the console, and hit generate. You'll see that it says: "trying to handle generate countdown", and however many times you press that it will go up.

What we want to do is throw in a parameter that's a function. That we can call back. So we want to throw in a parameter like we did our title, except for have it be a function. We will call this callback, and then we'll just say in here:

button.js

const Button = (title, callback) => {
    return (
        <button className="button" onClick={callback}>
            {title}
        </button>
    )
}

Now let's go into app.js, and let's pass it in right here. Let's say:

button.js

<Button('Generate Countdown', () => console.log('trying to handle generate'))

I'll show you this after we see that it's working. Let's hit generate, and it will say: "trying to handle generate".

We have a function now. It's good that we're doing this because we don't have access to stuff in here, which means we have access to change data in here and in our Clock. We can say we want to display it or not.

If we were using Redux, we wouldn't have to do this, but with an example this small we wouldn't even be using Redux. I just want you to know that with Redux, we can have short cuts into different files. We can handle data in different files without having to do this kind of stuff with callbacks, so just keep that in mind when you start with Redux in the next application.

Instead of doing this, we want to set a property in here that will say: "okay, we want to display this." If we go to picker, we're using state. So we want to use state in our app.js. Let's create a constructor, now let's say:

app.js

  constructor(props) {
    super(props)

    this.state = {
      active: false
    }
  }


  renderItems = function() {
    if(this.state.active) {
      return [
        <Clock/>,

      ]
    } else {
      return Button('Generate Countdown', () => this.setState({ active: true }))
    }
  }.bind(this)

    render() {

    // return <div className=""><Clock/></div>

    return (
      <div className="grid">
        <h1 className="grid__title">Birthday Countdown</h1>

        <div className="grid__skew-dark-one-box"></div>
        <div className="grid__skew-dark-two"></div>
        <div className="grid__skew-dark-three"></div>

        <div className="grid__skew-light-one"></div>
        <div className="grid__skew-light-two"></div>
        <div className="grid__skew-light-three-box"></div>

        <Picker/>
        { this.renderItems() }

      </div>

Awesome, so let's go ahead and test this out. That should be all we need to do to do that, although we are going to need to add in the change button. Hit generate, and it appears, but now we have no way of going back.

Let's put in a change date button in our JSX here. We need to return it with Clock, so let's just copy button so you can see what I'm talking about. I'm going to put a comma after Clock, and place it here. The reason we are doing this is because you can't return multiple items in parentheses. You have to use brackets, like an array.

Let's go in here, and now when I hit generate it's going to return both items. Now the reason it is displaying it above it is because we placed it there in CSS, so doesn't matter if we render this below or above Clock.

Now what we need to do is, we need to change this button to say something else and do something else. We want it to be change date. I'm not going to use this button class. I'm going to use a new class. Let's go ahead and delete that, save it, and commit our code. Then in the next video, we develop the change date component.

I'm going to hit command +j to open my terminal. Let's say git status, git add ., and let's say git commit -m "rendering JSX based on app state". I'll see you in the next video.

Resources

• Source Code