Properties also known as props and are most often referred to as props. So before we get started with that let's add in a little bit of HTML to our inputs so that we can complete what we forgot to do in the last video. So if you go over to our completed app or our design here you'll notice that there is a label underneath each one of these inputs and we need to get that label underneath our inputs because clearly when you type in you can't see what this is anymore. So go ahead and go into your project and to do that below this row in the input wrapper column. We're going to add another row and in this row we want to add in a Col md="12" so it fills up a whole row and within this column let's just add in our div lowercase d since it's just an HTML element and let's give it a class name inputDescription so we can style it later on and then in here just put it in color.

Go ahead and copy that a few times. Put it throughout all the four components we have right now here and while we're at it let's make each one of these unique so you can see that this is color noun adjective and celebrity. Starting with our second one we need to change this to Noun (Plural) for placeholder and then copy that and for the label underneath we need it to be noun plural and then we should do that to the rest of our components. So we have adjective and celebrity let's change this to adjective and celebrity.

All right so now if you save that we should have hit them all and I might have missed one, you noticed that when it reloads we have all of our unique inputs of color noun adjective and celebrity. Now if you open up the console and you tap into these inputs you'll notice it all says trying to handle change.

We don't want that, what we want to do in this video is see if we can get it to print out what we're typing in these boxes and what the title of the box is so we wanted to say something like handling input change for color or input change for color.
Then what we're typing into that input. So the way we can do this is by introducing a concept known as application state. We went a little bit over state in a previous guide but in this guide, we're going to go a little bit more in-depth and we're going to learn a little bit about props. So heading over to the link in the description we will be brought to instance properties and the first one is this.props and basically, props are properties and it tells us here that this.props contains a prop that was defined by the color of the component. And we went a little bit into depth of what this was in a previous guide. But I'll show you right now what this is so in our app.js if we type in name is equal to Max. You go into madlib_formand in our render function, we alert this.props.namehit save and go to our app.

Notice that when it reloads we'll be alerted with the value of what name is in here. So basically what's going on here is we're passing in a property called Max we'll call name of the value of Max and in here we're alerting that property we're getting it from our props. So same idea here except for not with a component what we want to do is pass in some props into our handle change function. So you might already know what we have to do which is type and props as a parameter and then passing some props when calling this function. So in curly braces, since we want to be a javascript object let's put in something called title and let's give it a name of color with a lower case c and I'll tell you why we are doing this in lower case later on. Let's go ahead and reload while we actually won't know what is going on because we haven't printed anything else. So if you console.log(props.inputTitle) you'll notice each time we type it's going to tell us the input title of color and that might actually not work. Yes so you'll see that it only tells us once and that's because the function is only running once when it's being rendered. So what we have to do here is return a function and in here let's just copy and paste this console log statement

and it should work now say that had back to the browser and once it's reloaded type into the color box and you'll notice every time we type every single time we touch a button, a key it goes up 1. So as you can imagine what we're aiming for here is instead of just saying how many times we type we want to type we want to display what we're actually typing in the console here. So back in her app before we do that let's just copy this on change part

and put it in every single one of our inputs and let's change each one according to what their name is. So for this, we wanna put pluralNoun for next one we want to put adjectiveOne and for our last one we want to put celebrityOne and the reason why we're naming him celebrity one adjective one is because we have many different types. We have many inputs. We have celebrity celebrity. We have multiple celebrities multiple adjectives multiple nouns. And the reason were are using plural noun and not noun one is because we need to indicate that it's plural, not just regular now. So now you save that and we go into our app you'll notice each time you type into one of these boxes it will tell us which ones were typing it which is pretty exciting. Just like that. So what we want to do now rather than displaying how many times we type it we want to display exactly what we're typing instead. So to achieve that we have to pass in an event parameter to our function and we are returning and lets console.log in back tics value for input and put in the input titles so props.inputTitle is: another variable which is going to be event.target.value that's going to give us the value of our input because we are getting it from the event. So go ahead and delete that and delete this while we are at it and save that and back in our application. We should be getting what we're typing in.

All right sweet, so you can see that each time we type in a letter is printing out on the screen every single time so back in our completed app. If I hit generate you'd notice I've typed out these values so if I change just to something like blue, developers, neat you'll notice it automatically updating. So I'll delete the t in neat and you'll notice it's just nea all the way down to n then I delete that and it's just gone. So the neat thing about this is that it's updating automatically exactly how our console logs statements are updating automatically. So what we want to do is find out a way we can set this value into our app so we can access it throughout our whole entire app and place it in another component. For example, placing it into our content component that we will be making in a future video. So the way we can achieve that is through application state. It says here in the documentation that the state contains data specific to the component this component that may change over time. The state is user-defined and it should be a plain javascript object. What we want to do to set this up is by typing out a constructor passing in props, super props and the state part of this comes in when we type in this.state={}to an empty javascript object.

Now what we want to do is put in each piece of state that we can then map to our inputs so color and let's give it a blank value and then plural noun blank, adjective one blank, celebrity one. All right so we have four pieces of state.

Now let's find a way to set our state every time we're typing because that way we can access the state in a different component in the future and pass in some of these values so we can update those components automatically. So you might notice that each of these is exactly the same as our input title. So the reason we named these the way we did is because we're going to be accessing our state by using these and the way we can do that is like this. You can put in something like 'value for state' ${props.inputTitle} is: ${this.state[props.inputtitle] and we need to close this real quick.

So for calling the styles doesn't get too confusing and then hit save. Let's go ahead and go back to our application and type in these so you'll notice that it says cannot read property stay undefined and the reason being is because we haven't told this function that has anything to do with the specific instance of the component we render.

So the way we can fix that is by binding this function to the instance of this component and that might not make a ton of sense. But basically what it means is that we are telling this function that it belongs to this instance of the component which is initialized in this constructor which will give us access to this exact state.

Without this, we have no idea what component with one instance of the component. So in here, we can type in and you'll notice this is updating and it says value for state colored is blank and you might be a little confused but the reason being is because we haven't set these colored plural noun adjective 1 values to anything we haven't change them we're simply retrieving them and they're still blank. The way we can change that is by setting it and you might think the thing we should do is by calling this.state.color = event.target.value. And you'll notice that actually works but we don't want to do that. It's not what we want to do and the reason we don't is because in the documentation they tell us never mutate this.state directly as calling setState afterwards may replace the mutation you made. Treat this.state as if it were immutable outside of the constructor. Of course, you need to declare it and then we just treat it as a constant. So the way we can modify it though is using setState. So in here we just need to go this.setState and then what we need to do is rep use our title which is props.inputTitle in brackets and then set it to what we want the value to be which is event.target.value.

Also, it is good practice to use semicolons as often as you can but aside from that let's go to our app and see if we are setting our state properly. You'll notice that we're setting our state and it's working. So now in an instance like this, we can map it over automatically which is really convenient and it's a really nice feature in react. All right so that's it for this video and the next video we are going to style our inputs and add in a card for our inputs so this will be the card and the inputs are going to look something like this.
And before we end it let's just commit our code by typing

git status
git add .
git commit -m "modified our handlechange function to accept props and set statewhithin this function" 

All right we'll see you in the next video.

Resources

react
source code