All we have to do is somehow calculate your birthday. We have access to all that information. Let's just go ahead and set it now. Instead of saying LargeText("04/03"), what I want to do is write out a function:

app.js

  getBirthDate = function(date) {
    const month = date.getMonth();
    const day = date.getDate();
    return `${month}/${day}`
  }.bind(this);

Simple stuff. Pretty straightforward. Let's call this function now with our date. We can do it right here, let's just say:

app.js

  handleGenerate = function() {


    var bday = this.state.startDate.toDate();
    var today = new Date();
    var currentMonth = today.getMonth();
    var birthMonth = bday.getMonth();

    const monthDay = this.getBirthDate(bday);
    console.log(monthDay);
    var timeBetween = today.getTime() - bday.getTime();
    var daysOld = Math.floor(timeBetween / (1000 * 60 * 60 * 24))
    var age = Number((daysOld/365).toFixed(0));

Let's test it out. Let's select a day, open up our console, and then hit generate countdown to see what we are getting. Okay, cool. 4/11. The only problem is, for some reason, the way the date object works is, it takes it back a month. I assume it's because it's an array or something. Month 1 is considered as 0, so month 5 is 4.

What we have to do is go into our birthday function, and we need to just add one to the month.

app.js

  getBirthDate = function(date) {
    const month = date.getMonth() +1;
    const day = date.getDate();
    return `${month}/${day}`
  }.bind(this);

Now what I want to do is show this into our deal here, and not into our console. I want to show it in here. So what we have to do simply pass it in right here. Now what we could do is we could set it in here at the state in here, or we can just get rid of this, take this function call, and get rid of this constant.

Then we could pass it in right down here.

app.js

  renderItems = function() {
    if (this.state.active) {
      return [
        <Clock timeRemaining={this.state.timeRemaining} />,
        ChangeDate("Change Date", () => this.setState({ active: false })),
        LargeText(this.getBirthDate(bday))),
        <label className="grid__remaining">
          Remaining until you turn {this.state.age}
        </label>
      ];

There's a couple problems. One we don't have access to bday. Pretty simple fix all we have to do is say:

app.js

  renderItems = function() {
    if (this.state.active) {
      return [
        <Clock timeRemaining={this.state.timeRemaining} />,
        ChangeDate("Change Date", () => this.setState({ active: false })),
        LargeText(this.getBirthDate(this.state.startDate.toDate())),
        <label className="grid__remaining">
          Remaining until you turn {this.state.age}
        </label>
      ];

The reason I know that is because we do it up here. That's how we got bday in our function, and that's how we can get it down here.

Let's try it out. Save it, and go to our application. Reload the app, let's close our console, let's select a date, and let's hit generate. It should say 5/10. Really really simple fix and everything else works.

It displays the days, it displays the 5/10 there, and looks pretty clean. The only problem is our design wants a 0 before that 5. Let's do this, let's go into our function around line 102, and let's say:

app.js

  getBirthDate = function(date) {
    const month = date.getMonth() +1;
    const day = date.getDate();
    if(month < 10) {
      return `0${month}/${day}`
    }
    return `${month}/${day}`
  }.bind(this);

Sweet. Pretty simple and straightforward. Let's go to our application, and let's choose a date and hit generate. You'll see that it says 05 now. That's exactly what we want.

That basically conclude the application, although, there are a couple things we could change. One of them is styling right here for Change date and the last is going to be this error that you see right here.

We can quickly get rid of this problem, so let's just do it in this video. Let's go into our app.js where we are returning this data here. The reason this is happening is because we're returning a bunch of items, and we need to give them keys because it's an array. Like this.

Let's go ahead, and we can give them keys and somehow return it with the div. That would require that we have this in both returns, which isn't really that nice, but it would work. Let's just give them keys. They just have to have unique keys. For the Clock let's say:

app.js

  renderItems = function() {
    if (this.state.active) {
      return [
        <Clock key={0} timeRemaining={this.state.timeRemaining} />,
        ChangeDate("Change Date", () => this.setState({ active: false })),
        LargeText(this.getBirthDate(this.state.startDate.toDate())),
        <label key={3} className="grid__remaining">
          Remaining until you turn {this.state.age}
        </label>
      ];
    } else {
      return [
        <Picker
          startDate={this.state.startDate}
          callback={date => this.handleChange(date)}
          key={0}
        />,
        Button("Generate Countdown", () => this.handleGenerate())
      ];

You'll see that Button, ChangeDate, and LargeText don't really have props, so we are going to have to pass something in or just go in and set them. Let's just go in and set them. Let's go into changeDate.js, and let's say: key={1}.

Then let's go into largeText.js, and say key={2}.

Now let's go into button.js, and say key={1}.

You're probably extremely confused on what this all means, but basically, all it means that these need to have unique properties because it's in an array. Unique keys. Now it could be any number, it could be 5,000,000, but the reason we are doing this is because it makes sense to go 0 1 2 3.

Now in the future, we are going to come across this error and I'll show you different ways of solving this. We actually did this in the last app we built, the Madlib one, by iterating over an array we have to provide a key. Just refer to that if you are confused, do some googling on keys in React, and that will make more sense.

That will get rid of that error. You'll see that we no longer have that error. Now all we have to change is this Change Date styling. Let's go ahead and conclude the app in the next video by finishing the Change Date styling.

Let's commit our code. Let's say git status, git add ., and let's say git commit -m "large text label and keys". See you in the next video.

Resources

• Source Code