What I'd like to do in this guide, is make it so when we hit clear form it actually clears the values. All we have to do is reset state right here. We just have to set this back to its initial value. First thing I want to do is this: we need to in handleFormSubmit set the state to the opposite of contentVisible, or what we have to do now is say:

card.js

handleFormSubmit(event) {
    event.preventDefault()

    if(this.state.contentVisible) {
        console.log('content is no longer visible')
    }

    this.setState({ contentVisible: !this.state.content })
}

Let's reload the page, and hit generate. If we hit clear you'll notice it prints this down here. So generate, nothing happened, and clear. It printed it again you see it says two.

So what I'd like to do is set our state back to nothingness. All we have to do is get this entire thing and copy it and paste it in here, and say:

card.js

handleFormSubmit(event) {
    event.preventDefault()

    if(this.state.contentVisible) {
        this.setState({
            color: '',
            pluralNoun: '',
            adjectiveOne: '',
            celebOne: '',
            adjectiveTwo: '',
            nounOne: '',
            numberOne: '',
            numberTwo: '',
            nounTwo: '',
            adjectiveThree: '',
            celebTwo: '',
            celebThree: '',
            adjectiveFour: '',
            nounThree: '',
            celebFour: '',
            adjectiveFive: '',
            contentVisible: false
        })
    }

    this.setState({ contentVisible: !this.state.content })

}

Since we're setting state back to false with content visible, what we can do is we can just say:

card.js

handleFormSubmit(event) {
    event.preventDefault()

    if(this.state.contentVisible) {
        this.setState({
            color: '',
            pluralNoun: '',
            adjectiveOne: '',
            celebOne: '',
            adjectiveTwo: '',
            nounOne: '',
            numberOne: '',
            numberTwo: '',
            nounTwo: '',
            adjectiveThree: '',
            celebTwo: '',
            celebThree: '',
            adjectiveFour: '',
            nounThree: '',
            celebFour: '',
            adjectiveFive: '',
            contentVisible: false
        })
    } else {
        this.setState({ contentVisible: true })
    }  
}

That might have been a little bit confusing, but try and understand what we did here. All we did was say: if the content is visible we want to set the state to clear. So let's type some things in here. Let's hit generate, and now if we hit clear: you'll notice it's back to normal.

That's how this works, but we have all this up here and we have all this down here. This is the exact same code. We could just make a function maybe by doing this:

card.js

handleFormSubmit(event) {
    event.preventDefault()

    if(this.state.contentVisible) {
        this.setState(INITIAL_STATE)
    } else {
        this.setState({ contentVisible: true })
    }  
}

We haven't made this variable yet. It's not going to work. It can crash if you try and do that. Let's go in here and hit generate and then clear. It says: INITIAL_STATE is not defined.

What we have to do is give this a definition. So up here, outside of our class we can say:

card.js

const INITIAL_STATE = {
    color: '',
    pluralNoun: '',
    adjectiveOne: '',
    celebOne: '',
    adjectiveTwo: '',
    nounOne: '',
    numberOne: '',
    numberTwo: '',
    nounTwo: '',
    adjectiveThree: '',
    celebTwo: '',
    celebThree: '',
    adjectiveFour: '',
    nounThree: '',
    celebFour: '',
    adjectiveFive: '',
    contentVisible: false
}

Now what we can do is go here, and you'll see it works because we have this INITIAL_STATE. Now in our state right here, we don't have to say this we can just say:

card.js

this.state = INITIAL_STATE

INITIAL_STATE never changes. It's a constant. It's constant. It's not a variable, it does not vary. It is constant. Okay, so that's how that works. Let's go here and let's type some values in. Let's hit generate, and then we'll hit clear. It clears everything.

That's the functionality of our entire application. It doesn't seem like we need to add in anything else except for the style.

I noticed we need to add one more thing and that is if we go to our application in the browser you'll see we have all these numbers. We need to add in the numbers here, and then we also need to add in the numbers right here.

What I'd like to do is add those numbers in the next guide. Let's commit code now. I'm going to close out of all the files. Hit command + j to open up the terminal, and expand it a bit. Then I'm going to type in: git status, git add ., and let's say git commit -m "finished clear form functionality".

I'll see in the next guide where we will continue, and get in the numbers for these inputs and numbers in here. Then after that, we will style our application.

Resources

• Source Code