In this guide, we're going to put our first inputs on the screen and we will be utilizing react strap to put those on our screen in a nice layout in a nice grid. So the first thing you want to do is head over to our wireframe and you'll notice that we have our inputs and our general button and these are existing in our mad lib form component.

The next thing you want to do, looking over at our design is to get them in a nice layout and a nice little grid here so that they look nice. So the same as in the completed application nice four grid layout, if you head over to the bootstrap documentation in the guide notes below and scroll down until you reach the 4 column row. You'll see that this is a very similar kind of way we're looking for much like our design there are four columns. So we kinda want to get this effect if we head over to our madlib_form.jswe can begin implementing this. The first thing we need to do is import column and row from react straps.

Those are the two things we will be using to generate this layout. So now what we want to do is replaces each h1 tag with a couple of parentheses and in here we want to render our layout. So starting with a row capital R in here let's put in four columns and between these columns let's just put in some text that says Column and for each of these we want to give them an md = "3" because rows add up to 12.

So this will fill up our entire row on the screen and this makes it really awesome and responsive. So heading back to our application you'll see that we have our column text, let us add some inline styles real quick so you can kind of see this a little bit better. So in a row type in style = textAlign: center;. Normally you don't want to do this but this is just for the sake of demonstration. So just typing these inline styles textAlign center and color: white; since we have a black background.

Now if you go to our browser and wait for it to reload and see that these are nicely aligned much like our completed app and if you actually size down you'll see that it goes down into a more mobile responsive kind of format. So the next thing you want to do is replace this column with an actual input. The way we do that is by first deleting this putting this down here and in here we want to put another row. And the reason we want to do this is because we're going to have a whole nother set of columns within each row that is going to be equal to 12. Basically, in our completed app you can see that we have numbers next to each of these, they are going to be worth equal to about 2 out of 12 of the row width. Then the input is gonna be worth 10 so I'll type that out now. We are going to put in a column od md = "2". All right so go ahead and put in a label class name greenLabel which we will add styles to later on. And while we're at it make sure you add in the class name of this row equal to inputWrapper we actually don't want that on the row. We want that on the input because this will be applied. Those styles will be applied to each input, not the entire row of inputs. So let's add in another column and you tend to make it out up to 12 and in here let's put in our input our HTML input lowercase i and for placeholder since our first input is color let's just put in color and for type put text now if you save it go back to your project you'll see that we have our first input and it should still be more responsive. So nothing's overlapping and it's looking pretty nice.

So just to give you a better idea of what's going on here I'm going to change this to 6 and this to 6 and reload the page.
And if we copy input since this isn't as clear and put it in here, reload the page you'll see that each of these inputs takes up about half of the row rather half of the column. If I change this back to 2 and this back to 10 you'll see again this is worth about 2/12ths of a row and about 10/12ths of the row. All right so go ahead and just command z all of that, get the label in there change this back to 10 and it's back to 2 and then let's just copy this three more times and wait for it to reload after you save the page or save the file. You'll see that we have 4 inputs. Now let's add a function to our input so we can actually have it do something when we type into those inputs. So in our input let's just type in onChange = {this.handleChange}and then we have to declare that function. So right above our render function within our class type, handleChange = function. Then in this function let's just console.log('trying to handle change').

Save that, wait for the page reload and open up your console using command option J and then type into one of these inputs well type into the first input since is the only one that will change. You'll see that it's printing this out every time we put the water in you'll see that number is incrementing each time so you'll notice that it doesn't do that with any of these other inputs since we haven't added The on change method. The handle changed method to the change attribute. So go ahead and copy that in.

You'll notice this is kind of redundant and in a future guide we'll be introducing a much more efficient way of rendering these inputs. But for now just so you understand the basics. We are going to do it this way. So each of these are going to print out the same thing but we want these to all be mapped to unique values like we see in our completed app. We don't want them all to be worth colored and we don't want them all console log the same thing.

So the next guide we're going to introduce application state and how we can map each piece of state to our input such as color noun adjective and that's it for this video to finish off this video. Let's just hit

git status 
git add .
git commit -m 'added react strap and inputs'

Enter and let's not push it. We don't need to push it right away and that's it for this video I'll see the next guide.

Resources

source code
https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns