In our completed app you can see the functionality when I hit generate it shows and when I clear it goes away. All right so to get started let's go over to our Trello board and into our UML diagrams. You'll see that we have this diagram here that says form submitted and form not submitted hide story form submitted then show story

and the way we can implement this into our application is by first going to our application. Opening up our madlib_form.js file and you'll see that we have this piece of state called completed form. This is basically form not submitted and form submitted that's our boolean that we were going to be using to keep track of whether or not it's completed whether or not the form has been submitted and we've actually already done this in a previous guide in our render button.

So we're checking if this.state.completedForm is true and if it is we are returning the clear button

and if it's not we are returning the generate button

and you can see that functionality in our app when we generate it's clear and when we hit clear it's generated.

So heading back to our code editor if we scroll down to the madlib content we could add a property called completed and we could give it a value of this.state.completedForm and that would work great but we've already mapped in our entire state into this component so there's no need to add an additional prop. We can actually just go into our content component and access it like I've done here just barely.

So the way you're going to do that is by typing const completed = this.props.completedForm

now back to our Trello board. When you see hide story and show story we're going to implement this using class names. So first let's cut this out

and let's add in another div with a className='showContent" and paste that back in after you've cut it and if you want to format it like this. Just select this and then tab and send it over a bit and you can shift tab shift tab shift tab shift tab you it will bring this step back and now what we're going to do is open up our component scss file for our madlib form and since this is for our madlib content let's create a new scss file and let's name it madlib_content.scss and in here let's go ahead and add this

    .showContent {
           visibility: visible;
    }

So now if we reloader application you'll notice that nothing has changed and it's still visible and that's because we've made it so visibility is visible and if you want to hide it we can hide content.

.hideContent {
        visibility: hidden;
   }

This ability is set now if we go back to our content we can say this is to be hidden now and we can type in hideContent.

Now back in our app, we can wait for it to reload and you'll notice that our content is still there. And let's find out why all right so the reason it's not working is because we just created this file and we haven't imported it so go to our main.scss and let's just go ahead and import this file so

    @import 'components/madlib_content'

and make sure you don't add the scss, lets kind of group these together so madlib form, header this just makes it all more readable for yourself and other developers.

So with that organized go back to the app and it should be gone now. So it's gone back in our code we want to make it so we can show unhide this when we click it now instead of just hiding or showing 100 percent of the time. So in here, we're going to use a ternary operator and the way we can do this is by typing out an expression here in our class name. We want to decide whether or not we're going to show the content or hide the content based on this boolean value. So the way we can do this is by first deleting everything in class name putting in some curly braces. Since that is our property here that we got and the put a question mark. And here we can put our class name. So showContent if it's completed we want to show it and then if it's not completed we want to hide it. So go ahead and save that and back in our app it should be working. Let's take a look. All right so you'll notice that it's not working. Let's find out why. All right. So the reason it's not working is because we've referenced completed form incorrectly. We want to actually get this from data and if we wanted to do it this way we could just type in dot data completed form and that should work. And yeah so it looks like we are showing and hiding our content but we don't want to access it this way since we've already declared data and set it to this dot props idea. So what we can do is just type in data dot completed form and use the like that we could even just cut this out right here and pasted it here. Get rid of this constant entirely and we could access it that way and it would work exactly the same. Go back to our application and you'll notice that it's still doing the same thing.

So with working now let's go ahead and style our content to have that background there like you see here not completed app. Let's also go for this lighter look it looks like this is darker. So the way we can start this is by going back to our application code and going into our madlib_content.scss. But first, notice the class name is content wrapper. So go ahead and type in

    .content-wrapper {
           background-color: #f2f2f2;
           padding: 42px;
  }

So if we remove that padding and save it and then go in I'll show you what I'm talking about so reload that generate and you'll see that it's really close to that. We don't want that we want that breathing room we see here. And both of these apps so go ahead and give that padding a 42-pixel value. And then let's give the margin-top of negative 22 pixels to pull it right up under the button. So once this reloads you'll see it pulls it right up under there and we can either give it this round border right there or we could copy the design like that. I'll just leave it. I think that looks pretty nice.

So that's going to be it for this guide in the next guide we're going to adding some labels for our content. So, for instance, you see blue here we're going to give it a nice label. We're going to have this nice label and so on. Just like you see here in this application we typed in blue. You'll see it's labeled nicely and it has a little highlight there and back over here. We're also going out in the rest of our inputs and that should be pretty quick and before we hop on over to the next guide. Let's go ahead and commit our code so in the terminal

git status
git add .
git commit -m "added our content component in the previous guide and added styles to that component in this guide"
git push origin master

We should be good and I'll see you guys in the next guide.

Resources

source code