Next up on the task list is task number four rendering the search results. As it stands a search results aren't too much to look at, we can't even see the actual jokes from the search which isn't very useful. In order to properly display a list of results in JSX, you'll need to iterate through the collection. The first thing I'm going to do is change the p tag into an unordered list tag. This makes more sense since we're rendering out a list of jokes. Since jokes is an array, I can call map on it.
And for each item in the array, I'm going to return an Li element. Inside each Li element, I'm going to insert the actual joke copy. If you recall, a joke object contains a unique identifier under the ID Prop, and then the actual job itself under the job prop. In our case, we want to just render out the joke. Okay, now let's try a search and see what happens. Nice.
It looks like our jokes are finally rendering. But I can see that our console log has a warning in it. React will usually give you a warning in the console if you're doing something it doesn't like in this case, it's telling us each child in an array or an array Should have a unique key Prop, and even provides the link for more information if we like. So it looks like react is telling us that we need to give each Li element a unique key prop. This key attribute allows react to identify individual items in a collection. This becomes especially important when sorting large collections as it allows react to only render the items that change instead of re rendering the entire list.
The important part is that each key value be unique. In our case, we can use the ID prop from our joke data. Now that each joke in the list has a unique key prop or recording has disappeared. may have noticed that we are still setting the is fetching jokes date from before but we're no longer using it. Just like before, I'd like to show a message while search results are being fetched. We use the same approaches last time and use a conditional expression.
If it's fetching joke is true display the message searching for jokes and it's fetching joke is false render the search results below This will work I'm not a huge fan of his formatting as I find it harder to read. Sometimes you may find it helpful to break rendering up into smaller functions. I'm going to go ahead and do just that with a joke list element. I'll start by creating a new method named render jokes and have that return the unordered list of jokes instead. Now I can update my conditional expression to use render jokes in place the joke list element, which I think makes the condition much easier to read. To test the loading message, I'll throttle my connection speed again using Chrome's dev tools.
Now when we submit the search, we get a much more user friendly searching for jokes message while the jokes are being fetched. And that takes care of rendering search results on our task list. Next up is hooking up the I'm feeling funny button.