It's pretty simple, and we were provided with the story on the Trello board here, which is in the guide notes below. I'm going to go here and click content for application. I'm going to click on this, and this is just the guide notes copied over.

This is why I named it celebOne. Remember when I said we're going to name it celeb instead of celebrity? You'll see in this data here it is celebOne. I don't want to go through all those and say celebrities, so we're just using celeb.

So with that copied I'm going to go back to the app, and I guess we don't need a copy now., but I want to keep it on the clipboard just so I have it. I'll go back to and copy it again just cause.

What we need to do is create a new component here. Let's call this component content.js. In here we want to make this a class component so let's import React and component. We need component to make it a class component, and let's say:

content.js

import React, { Component } from 'react';

class Content extends Component {
    render() {
        return (
            <div>
                {/*content*/}
            </div>
        )
    }
}

default export Content;

Now we don't need this to be a class component, but we already typed that out. I don't want to change it, but we have access to this thing called props in class components. Obviously, well not obviously because you might not know what props are yet, but basically we don't have any props here. When we paste this in, in a paragraph tag instead of a div.

When we paste this data in, we're not going to have access to all of this data. We're not going to have access to color. We're not going to have access to data, which means we're not going to have access to any of this, but by using props we can. So up here under render, I'm going to say:

content.js

    render() {
        console.log(props)
        return (
            <p>
                {/*content*/}
            </p>
        )
    }
}

Then I want to comment out this entire line here because it's going to give us an error if we don't. Now we just need to use this component in our card. Go to our render function, and below all this data, what I want to do is use this component so let's say:

card.js

        return(
            <div className="card">
                {
                    // inputData.map(data => Input( (data), this.handleInputChange )
                }
                <Content/>
            </div>
        )

If you're using visual studio code, you probably have this feature that you'll see right here says auto import from './content'. If you click that and scroll up to the top you'll notice it automatically imported it for us. So all I'm saying is import Content from './content'; the same way I'm doing input.

Let's save it, and let's go down here. Let's see what we have to do. Okay, so we have content. Now let's go over to our application. It should be rendering right, and we have an error it appears. Let's open our console using command + option + j. You'll see it says props is not defined.

If we go back to our content.js component, you'll see we're just saying props. What we need to say is this.props because it belongs to the instance of the component. Now when it reloads, you'll see it's an empty object because we have no props. It's just an object. That's exactly like printing out this: console.log({}).

You'll see we have two of these now. They're both empty objects. Nothing special that _proto_ thing. That's what made me feel like I should describe what this is because that's nothing unique to props. It's not unique, but it's just how an object works in JavaScript.

We need to somehow get all this data over. You know, we need to get all this data over into our application, or into our content component. If we go to our card.js, and our data is like this, and when we're console logging this.state. If we say this.state.color, and then go back to the app and reload it you'll see we're printing out the exact value of color.

So this.state, if we look at our content.js, is exactly what data should be. See this.state, or data.color. We need to somehow get this.state into here, and we can do that using props. I'm going to get rid of this empty console log and keep the props log.

Back in our input.js. I'm using it to explain what we're doing. You'll see that we have these variables, so this is technically like props. This can be thought of as like props. Just a bunch of values or properties. That is what it is short for.

Go to the React Docs. I'm going to search for props in the docs. Don't worry about default props, but you'll see that this button has an on click piece of state. Now that is technically a prop that's going into a button. I'm trying to find a unique element but I am unable to. So I'll show you in our application.

We need to provide one of these. Think of these as props into our content in our card.js. What that needs to be is this.state. We just need to call it data.

Now think about how you can access this data in our content component. We know this is an object, and we know it works like input.js which means it's probably somewhere in here, except for in our content. If you print out this.props when you type you'll see we have data, which contains all of that data. So now we have to say:

content.js

    render() {
        console.log(this.props.data)
        return (
            <p>
                {/*content*/}
            </p>
        )
    }
}

That will print exactly what we need. It's printing exactly what we were printing in our other components when we were saying this.state.

So this.props.data is now equal to what this state is in here. I'm going to get rid of that log.

card.js

handleInputChange(event) {
    this.setState({ [event.target.name]: event.target.value })
}

I'm going to save it, and head back to content.js. In here we just need to uncomment this paragraph and get a variable called data. All we have to do is:

content.js

    render() {
        const data = this.props.data;
        return (
            <p>
                {/*content*/}
            </p>
        )
    }
}

Let's save it, and you'll see that it's rendering over our content now. It's empty. It's going to be empty, but we can type in values that we can see blue. You'll see it automatically renders it blue. That's pretty freaking awesome.

Let's see what do we want to put for plural noun. I don't know. Let's skip that one. I don't like it. Let's put in an adjective. I'm going to say nice, and the nice Yankees. This is blank is pitching for the Yankees. We could put something like Big Sean. I'm not sure how good he is at pitching, but he's good with his lyrics so we know that.

For now, I just want you to get the idea of what's going on here. We could also put in celebrity like Jordan Hudgens. We all know he's a celebrity so that works. But yeah we're good there. That's how that works.

Now what we need to do is provide a button in our content component that will allow us to show and hide this. By default we want it to be hidden. If you look at our design when we go up it's not there, but when you generate it's there, and then the button changes. We just need to figure out how we can press a button and have it display this content. So I'll show you how to do that in the next guide.

Let's open our terminal here in the Visual Studio code editor, or whatever editor you're using with a terminal, or a terminal alone, and let's say: git status, git add ., and what I want to say here is git commit -m "created Content component to generate story". Okay, I'll see you in the next guide where we will continue on our amazing React journey. I can't believe I just said that. Catch you later.

Resources

• Content Code:
  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 a 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!

• Source Code

• React Docs