Let's take that results right, and build out a list to show inside of all of our J x x down here.
I'm going to make a new variable right above our return statement.
No call it rendered results.
And that's going to be the result of doing a results dot map.
We'll take a look at every article or every kind of result that we got back and build out a list out
of them.
Inside this mapping statement, I'm going to return a div with a class name of item.
Do a little bit of formatting here.
There we go.
Then inside of that d'Hiv.
We're going to put in a div with a class name of content.
And close it off.
Well, then put in a div with the class name of Heather.
And close it off.
And then inside of here, we're gonna print out the title of the article we just fetched, though,
the immunity idol of the article.
If we take a look at the request that we are making or more specifically, the response.
The title of the article is available as the title property so we can put inside of your result thought
title.
Then immediately after that, d'Hiv, we're going to print the kind of summary of the article itself.
That would be the snippet right there.
So I will put in.
Result.
Not.
So that's our list.
So we now need to take rendered results and show it inside of all of our J sex down here.
I'm gonna find the closing div of UI form.
So that's the closing date right there and right after it.
I'm gonna put in another div with a class name of UI spelled list.
And then inside there, we'll print out rendered results.
OK, I'm going to save that.
Let's go back over and see what we got.
All right.
Well, it's not great.
We definitely the list, but something is not quite right about it, though.
If you take a very close look at this.
You'll notice that in the response we get back from the API.
Wikipedia is automatically giving us a response that has some each female written inside of it.
And the goal of that is to, well, highlight the search term that was found in the article.
So I search for programming.
And so in all these little snippets, Wikipedia has found the word programming and wrapped it with a
span that has a class of search match.
This is supposed to be done as kind of a convenience thing here.
We can tell that for us it's not super convenient.
It's giving us these kind of nasty A.T.M. inside of all of our results.
The other little issue I mentioned very quickly, I completely neglected to add a key property to each
of those search results.
Let's first take care of fixing up that key property and then we'll figure out how to remove that ugly
looking H.T. inside there.
After that, to remove the key property.
You'll notice that in the response we get back.
Every result we have has a page I.D. and so we can use this page I.D. as the key property because as
usual, it is probably consistent and unique.
We're going to find my list on that d'Hiv.
I'll put in the key property as a result.
That age I.D. and I want you to take a really close look here.
I.D. is lowercase.
We need to put in page I.D. with a lowercase I.D., though, page I.D..
Make sure it's lowercase.
When we're safe.
Well, it looks like that era has gone away.
Now we just need to figure out all this H.T. mail stuff.
Let's figure out how to remove all that H.T. mail in just a moment.