Let's get started. Let's close out our terminal here, and the code. Not sure how we got this file, but I'm going to close it. What I would like to do is head over to the card.js component.

Try and think about how we want to get these over. We have our render function, and we're rendering all input data. We talked about the key. We had a unique key, and in our input component: we're doing this with the name.

Now that's unique, but we could also use the index of the array because we know that each one of the items in the card.js has its own index: 0 1 2 3 4 and so on. We can get access to that right here in our map function.

I'm not sure if I explained this already, but I think we talked about it. Basically, what we have to do is wrap this data very well with parentheses, and then using the map function we can have access to this piece of data that's called index.

Now I'm going to save that, and I'm going to go to my browser and show you what this is. So I'm going to google it and I'm going to say javascript map function.

Right here we have Array.prototype.map() on the Mozilla Docs since Firefox made JavaScript. Now, they have it written out pretty simply, but right here we have the syntax:

What we're interested in is the index variables, so it's not just some magic thing that comes out of nowhere. That's why I didn't want to just like say that because then you might think: "oh we cannot in a title and get some random title." No, this is a parameter that is part of the map function.

If we command + click into map. It should bring us there. Yeah so you see this map and it says index number.

Value is, in this case, in card.js. We have data. That's our value coming out of input data. Then we have arrays, so you can provide an array, but we're going to provide an index. Again, back here in the docs, it says the index of the current element being processed in the array. We don't have that index, but we can put parentheses around this, and then say index here.

Now, we're not going to see it because we're not doing anything with it, but if we wrap this with brackets right quick, and then put this on a new line. So I'm just rewriting some of the syntax we can use it better.
We can do this.

That's exactly how it initially works. This is how this function is written. It does the same exact thing. I'm going to copy it and then just reset it. You'll see if I run it it's the same. If I paste this back in here: same output.

Instead of doing, I don't care about what they're doing here, what I wanted to do is just return the index and show you that. Now it's just going to say 0 1 2 3.

We can do the same thing to name our items here. We can say and get the unique value. So we have our index. Now I'm going to wrap this in brackets so we can get that full syntax for a an Arrow function in JavaScript. Then I'm going to put this on a new line put this on the line and now we can do more in here.

So one thing you have to do now is:

card.js

    {
        inputData.map((data, index) => {
            return Input( (data), this.handleInputChange, index) 
        })
    }

Now let's head over to input by command-clicking on input, and if that doesn't work just head over input.js. In here, instead of saying key is name, let's provide this index parameter and say: key is equal to index.

Now what I'd like to do, now that it's set up, is I'd like to put a label here and just say: index. Another thing I'd like to do is name these. We're going to need to name these, but let's go and see if this is working. So in here, you can see that we have 0 1 2 3. It's working great. Although, we don't want it to start at zero, but really easy fix.

All we have to say is index + 1.

Now if you save that, and go back: it's just going to start at 1 because it saying 0 + 1 and so on. We have all our inputs in our design. You see it goes up to 16 and we'll style that later on in the next guides. We're going to start styling, but what I'd like to show you now is something else.

We need to name these. We need to say className="input__number". Then for input, let's just say className="input". Let's just leave that one. We can just reference that directly.

We just need to specify the inputs or the labels because there's two of them we can't just say label because it's going to be referencing different labels in the CSS. For this one I'd like to say className="input__title".

We're set there, and that works great. Now, we need to put these numbers also in here, so try and pause the video and figure out how we can get those into our content component. So pause that, and try it now.

If you were unable to do it or you are curious to see how I did it: follow along and I will finish it up now. Let's go to our card component, and scroll down to where we're rendering this content. We have right it right here.

As you can see we're not really mapping over an array, so it's kind of hard to figure out how we might get this content. I, myself, don't even have a solution yet in my head.

Let's head over into our content.js, and see what we can do. So we are saying data.color. What I'm thinking is: let's just find out where this data of color exists in our array because clearly, this data has a bunch of objects in it. Obviously, a set of data.

Let's head here, and let's go here and let's find a function called Find index or something. I'm going to type in findindex. So it's called Array.prototype.findIndex(). Go ahead and click on that.

You'll see it says the find index method returns the index of the first element in the array that satisfies the provided testing condition, otherwise negative 1 is returned. Okay so let's try it. That's kind of confusing. Maybe not, I just hadn't processed what that said yet. With that said, it's basically saying 3 right on findIndex(findFirstLargeNumber).

It's saying: we want to find the first large numbers. What I'm getting is that when the element is over 13 we want to return that index was 0 1 2 3. This is over 13 so it's turn 3. So let's kind of modify this to be more specific to our case.

We want to say: where is 5, where is 12. Let's say return element. Let's see what is missing. Find first large number. Okay, get rid of this function entirely. Let's cut this out right here let's say constant. This is going to be the inputNumber. We want to console this.

We get findFirstLargeNumber is undefined, so basically we need to say find the next let's say 12. So it should return 1, 12 is not defined. So find index. Hmm, interesting so findIndex, let's try find. I'm going to copy this just in case we need a come back. Oh, I think I just found the one, I need it back, but it says indexOf. Let's try it out.

This looks right. We want to say: constant. This is the title we want. Let's just run this we know what to expect when we print ours. Okay so we're going to see these after ours, so let's say const inputNumber = beast.indexOf('camel'). Camels are dope.

Now that we're doing that, we're going to say okay maybe we're looking for data.color. Where is color? Let's find it. Let's say data.indexOf(data.color). Then we're going to say console.log(inputNumber) and then we're going to say: clearly data.color exists in the second area. Which means it's got to be the second area plus 1. That's where it's got located because it starts at zero.

If you search for it, it's going to return 0 because it's the zeroth element in the array. Kind of like how when a child is born, kind of a really strange reference. Not trying to be creepy here, but basically when a child is born. They don't start as 1 years old. They start at zero, and then they're a month old, 2 months old, and all the way up until they're 1.

Very much like in an array, you don't start at one. You don't all of a sudden have one already. You start at zero, and that takes up one. Just like how a child reaches 1 year old after living for a year. They're not automatically 1 year old they're zero. Then they're are a couple of days, and so on. That's how that works.

Let's go ahead and use this function in our application. Let's go in here and let's say we're going to do this, it's going to take a minute. What I'm going to do is have you do this on your own, but we'll do first couple together, so data.color...Let's see what what we're going to do here.

We need to display it right before this, and we clearly want it to be displaying in a certain style, like we are in here. This little black circle here.

What I'd like to do is put a span tag before each of these. Then in the span tag I'm going to say...This is going to be a lot of tedious code writing, so we're going to say: <span>{data.indexOf(data.color)}</span>. Now you'll see that when we hit generate, we have an error.

The problem here is that this is an object not an array. What I'd like to do is: let's go to card.js, and let's see...we could pass in. I'm going to Google index of item in object. I just clicked the first one. Let's see. They're just hard coding it. I guess what we could do is just provid it in our object.

I don't really like that. Hmm, index of none. OK. OK. He's saying your example is this, providing this. That's what I was initially going to do. We can easily just do this. I thought that you can't use that app function on that.

Let's go into content.js and get the data. So it's saying that this doesn't exist because it's an object, so I'm going to cut that out, and I'm going to paste that up here and comment it out, so that we still have access to it.

Now what I'm going to do is map over this, so I'm going to say:

content.js

const data = this.props.data;
data.map((object,index) => {
    console.log(index);
})

This should give us access to all of our things. If you can indeed use map on objects. So we have an error that says: data.map is not a function. Let's try this:

content.js

const data = this.props.data;
this.props.data.map((object,index) => {
    console.log(index);
})

Maybe it's doing something weird with that variable assignment. Okay. Clearly, it's not working. Let's look here. They're just making it as an array. So what we can do is actually pretty simple we go to a card.js, and I think this will work. Let's go to our render function or our constructor or I mean our initial state here, and let's make this an array. Pretty simple.

Let's just get rid of the object curly braces. So it's an array.

I guess that didn't work. I really thought that would work. I mean what you could do is make these all individual objects but that's going to get real complicated. So those are all objects, but I don't like that.

So it looks like he has the same question. I think you can solve it in one line using the map function, but I thought we didn't have access to that. He's doing something else. OK. Well, this is going to get too complicated too quickly.

What we're going to do is instead of using this we're going to do this. In content.js, let's make a for loop and let's say:

content.js

const data = this.props.data;
for(key in data) {
    console.log(key)
}
//this.props.data.map((object,index) => {
    console.log(index);
})

This probably won't work, but whatever, let's try it out. Ok, it says key is not defined. Maybe what we could do is set these. I don't think this will work, but for some reason I'm thinking it will at the same time. It's not working. Why did I do that.

You just ignore this. What I'm doing on here because I accidentally clicked on this file and hit command + z in the blink of an eye.

Basically, what we'll do is we will do that in a different guide because for some reason I can't think of a good way to do this right now with the way we are rendering our data here. Let's just end the guide here, and then get into the styling.

Let's hit command + j, and in here let's say git status, git add ., and what I'd like to say is: git commit -m "put number labels on inputs". Okay I'll see you in the next guide, and let's just push this since we're going to start on the styles.

Resources

• Source Code
• Mozilla Docs - Array.prototype.map()
• Mozilla Docs - Array.prototype.findIndex()
• Mozilla Docs - Array.prototype.findIndex()