Now that we have the app working well for one job, let's take things a step further. Instead of just fetching one random joke, let's give the user the ability to search for jokes. The first thing we're going to need is a form. So let's go ahead and create an empty form to start with. Next, we need somewhere for our user to input their search. So let's go ahead and add a text input with some placeholder text.

And lastly, I'll create a button labeled search that will be used to submit our form. Now that we have our form set up, or tell me a joke button is looking kind of lonely floating around out there. For now I'm going to just move it inside our form as it will be using it later on. Okay, so what's next? When working on a new feature, I find it very useful to break it down into smaller tasks. So let's go ahead and create a task list to track the work we're going to be doing for the search form.

First up is calling a search job endpoint and storing the results, then saving the user search query, then triggering the search on form Submit. After that, rendering the search results the screen then hooked me up on filling button, followed by creating the search form component, then refactoring code cleanup. And last but not least add styles to the app. Now that we have a plan, let's get started with task number one, calling the search endpoint and storing the search results. The first thing we need is a way to search for dad jokes. Lucky for us the same API we were using the fetch random dad joke also provides a search endpoint.

According to the API docs, we need to pass the search term as a query parameter, and will be returned the search results in the following format. I'm going to go ahead and copy the URL for the search endpoint. Instead of creating a new method for search. I'm going to repurpose the existing fetch job method. I'll start by changing the fetch URL to use the search endpoint I copied over from the docks. Then let's remove this as a call for now and just replace it with a call that will log the search results to the console.

Next, I want to rename the fetch joke method to something more appropriate. Since fetch joke is currently referenced in multiple places. We're going to make use of code sandboxes change all occurrences option. This allows me to quickly Replace All references of fetch job with a new name search jokes instead. Lastly, I'm going to do some cleanup and remove some unused items that are no longer being used. Okay, let's take a look at the console and see what's happening.

You can actually see that we already have a response log to the console. This is because search jokes is being called on a component did mount lifecycle method just like best joke was, you may be thinking, how are we getting search results if we haven't actually entered a search yet. If we pop over to the API Doc's again, you can see that if no search term is provided, it'll default to returning all jokes, which is what is happening in our case, nothing you may notice is that a search response contains more than just search results. In our case, we're really only interested in the array of jokes contained in the results property. For that reason, I'm going to simplify things and store the results directly in a variable called jokes. Now we can see that we were just getting an array of jokes back which will be easier to work with.

Now that we know our search calls working we need somewhere to store the results. For that, let's create a new state variables named jokes, instead of equal to an empty array to start with. Next, let's replace our console dot log call with a call the set state and pass in the jokes returned from the search. While we're at it, let's go ahead and add back our is fetching joke state and set it to false. Also, just like before, we should set its fetching joke to true when search jokes is first called. Lastly, let's remove the old joke stay variable since it's no longer being used.

And just to double check that our search results are being stored, I'm going to go ahead and render them to screen. Since jokes is an array, we would usually iterate over the data to render it. For now I'm just going to call to string on it so we can see something come up on screen. And there we go. our search results are showing I'll be there looking pretty ugly right now. Don't worry though, we'll be giving those search results much needed TLC and soon enough for now though, I think that takes care of task number one.

So I'm going to go ahead and cross that out. See isn't that satisfying? We're making some progress here. And next up is saving the user search into state