So our inputs will clear and in this video, we are going to be implementing this content component. It's going to allow us to display our inputs below in this content in the mad lib story. So real quick before we get started I went ahead and I committed my code to Github and I also pushed it to GitHub because we forgot to do that in the last video. So I recommend you go ahead and do that. If you're following along using source control I'll also be leaving links to the commits like I've said in the guide notes below so you'll have access to that. You'll see that I did this 16 minutes ago and I said implemented clear mad lib button and gave it functionality. So I'll leave a link to this in the guide notes below and you can check it out and you can see that this is my commit message so if you want to commit with that same message you can do so. So to get started. Let's go ahead and go to our application in our code editor and let's add a component in here called madlib_content.js

and in here we just want to import React, { Component } from 'react';

Then let's just declare a class of class MadLibContent extends Component

and will type out a render function like we've done in every component we built and in here let's just return each one saying Madlib content is:and then lets access our props using this.props.name.

All right now down here let's export it and if you tried to run this nothing would happen

because we haven't yet put it in here. So in our madlib_form.js let's import MadLibContent from './madlib_content';.

Now just below our form tag let's go ahead and implement this

<MadLibContent content name = "working"/>

Now save that reload the page and we should be looking at some content so Madlib content is working. All right so now let's learn how to map a little bit of state right here. So in here instead of name let's put color and let's put in {this.state.color}. Now head over save this and head over to our content and instead of accessing name lets put color let's say color input is and let's save that.

Now reload this you'll see it says color input is nothing and let's just type in color. So blue, you will notice as it maps over automatically, fonts looking nice, etc. So go ahead and delete that and notice its automatic bl so that's really awesome. It's exactly like this are here so we type in here blue without an e notice it's just without an e. So that's really awesome let's go back to our app and now if we type in our color hit clear you'll notice it also clears from the content so that's really neat. Now, all we're going to do to import the rest of these is go over to our Trello board and click on content for application and copy this over.

Go back to your content component instead of returning an h 1let's just returning in parentheses a div with class name content-wrapper and let's just paste that in there.

<div className="content-wrapper">
   Ladies and gentlemen, this is <b>{data.color}</b> Barber, your sportscaster, bringing you the last inning of the game 
   between the Cleveland <b>{data.pluralNoun}</b> and the <b>{data.adjectiveOne}</b> Yankees. <b>{data.celebOne}</b> is 
   pitching for the Yankees. Here's the pitch! It's low <b>{data.adjectiveTwo}</b> ball that just cuts the inside of the <b> 
   {data.nounOne}</b> for a strike. That makes the count <b>{data.numberOne}</b> strikes and <b>{data.numberTwo}</b> 
   balls. Now here's the next pitch. The batter swings and connects. It's a long, high <b>{data.nounTwo}</b> out to <b> 
   {data.adjectiveThree}</b> field. But <b>{data.celebTwo}</b> is coming up fast and has it for the second out. The next batter 
   up is <b>{data.celebThree}</b> the Cleveland <b>{data.adjectiveFour}</b>-stop. Here's the pitch... and it's hit... a short ground 
   ball to third <b>{data.nounThree}</b>. <b>{data.celebFour}</b> scoops it up and throws it to first base for an out and the 
   game is over. And the Yankees move into second place in the <b>{data.adjectiveFive}</b> League!
</div>

You don't have to change any of this yet you'll notice that it's accessing data color data celebrity 1 we actually need to modify it so it doesn't say celeb one and rather as a celebrity one so celeb 2 to celebrity 2 celeb 3 to celebrity 3 celebrity 4 all right. Save that go back to our mad lib form and instead of passing in color we need to pass in one called data and pass the whole state because we don't want to pass in every single input in here.

That would be really inconvenient. So background content. We need to somehow get data and the way we do that is by going const data= this.props.data; that will give us access to all of our inputs or all of the data that our inputs are holding rather. So back in our application, you'll notice that we have a story in here and whenever we type anything in here it automatically updates. So this is awesome. Let's go ahead and figure out how we can show and hide this component and if we hit clear you'll notice that it actually gets rid of our inputs and it gets rid of our input data out of our content component which is really awesome. So that's it for this video and the next video we're going to learn how to make this content component show and hide based on the status of our form and we will also add few styles to this and then we will go from there. See you guys in the next video.

Resources

source code