All right, so now let's render our jobs.
Now we'll start nice and slow.
We're just going to display some kind of element for each job.
And then, of course, we'll work on the proper return.
For starters, we want to create a new component, and this is going to be job.
So this is where we're going to display info about each job.
It's going to be JSX and we don't need to actually set up the export.
So this is not something we're going to use globally.
Basically in our pages, we're going to use it only in the jobs container.
So this is going to be equal to job.
And in my case, I'm going to set it equal to heading three, for example.
Okay, good.
Then let's navigate to Jobs container.
And we want to set up two imports.
First of all, we want to grab the job.
Essentially the component we just created.
Then we want to grab the wrapper and yes, it's going to give me a bunch of suggestions, but we're
not looking for big sidebar.
Essentially the component name is Jobs container.
Our styled component.
And then also let's grab that use all jobs context.
And I think this is the case where I can.
Rely on auto import.
So let's invoke this is going to get us that data and we'll right away the structure it.
So again, the reason why we have access to it because in the all jobs, remember, we're getting data
from loader and now we're just pass it down.
So now in the jobs container, I want to access it.
And of course I'll set up my functionality.
Now, not only we're going to grab the data, but we'll also destructure jobs here and we'll set it
equal to our data.
And then first let's just set up a logic where if we have no jobs, I want to simply display heading
two with some kind of text.
So let's go here with if then jobs length.
So essentially, if we have nothing in the array, if it's equal to zero, then we want to go with return.
And we're going to go with rapper.
And instead of the wrapper, let's place a heading two.
And let's just say no jobs to display.
Dot, dot, dot.
Okay, good.
And then if everything is correct.
Pretty much.
I want to return the same wrapper.
So that is not going to change.
However, inside of the wrapper, we want to go with Div with a class of jobs.
And then in here let's iterate over, let's say jobs.
So that's our array.
Then we're going to go with map and then inside of this callback function I'll reference each and every
job as job because why not?
And as far as the return, we want to go with job component, then key is going to be equal to job and
ID remember that's the property of course we're getting from Mongo.
And as a side note, this needs to be underscore ID, that's more correct.
And then also I want to pretty much pass all of the properties.
So I'm going to go here with dot, dot, dot and then job.
So I'm spreading them out and if everything is correct.
We should see, at least in my case, quite a few of those heading twos or heading threes.
I don't remember which one I set up and check it out.
Of course I have right now the search container and also at the moment the job container just consists
of a bunch of job components.
And if you have the same result, we are moving in the right direction and we can proceed to the next
step.