Instructor: In last section,
we created a new component called Fib
and we added a couple of methods to it
to fetch some data from our backend API.
We're now gonna add on the ability
for this thing to be rendered onto the screen
of our browser and show some information to our user.
So to get started, I'm gonna go to the bottom
of the Fib class and define a render method.
Inside of here, I'm gonna return a little bit of JSX.
I'll return a div.
We know that we want to show a form to the user
like this form right here.
So I'm gonna make a form tab,
excuse me a form tag that has a label, a text input,
and a button assigned to it.
So I'll put in a form.
I'll put in a label.
Put some texts like enter your index.
I'll put in an input.
And then finally a button.
And for the button I'll give it some texts like submit,
like so.
Now we do have to add in some event handlers
to the form tag and the input tag,
but we'll get back to that in just a moment.
First, let's take care
of the other two rendering pieces we need.
So we need to make sure that we print out
all the different indices that we've ever seen
and we also have to print out all the different values
that have been calculated as well.
So for each of those two little tables right there,
I'm gonna place an h3 underneath the form tag.
The first one will have a title
of something like indexes I have seen,
and then the second one I'll give some text
of something like I don't know about calculated values.
Then underneath each of these
we're going to call a helper method
that is going to render the table
of all the indices that have been seen
and all the different calculated values
that have been calculated by the Redis worker.
So for the first one, I'm gonna make a helper method
and I will place it inside of here
with a set of curly braces like so.
And I'll say this.renderSeenIndexes.
So we need to define a helper method
that will essentially just print out the list
of all the indexes that our backend has ever seen.
So I'll go and define that helper method
called renderSeenIndexes right now.
Right above the render method,
I'll add in renderSeenIndexes.
And then inside of here we're gonna look at the value
of Seen indexes that we fetched
when we called fetch in indexes right here.
So I will return this.state.Seen indexes.
Now, seen indexes, just so you know
we haven't really looked at these data types
that are floating around,
but essentially this is an array
as a variety of different objects in it.
And each object has a number property.
And that number property is the number
that we want to print out on the screen.
So I'm gonna map over the list of all those objects
and I'm gonna put in a function right here.
Notice how I've got the opening curly brace,
or excuse me, the parentheses right here.
I'm gonna pull off just that number property
that we care about by putting down
a set of curly braces like so
and then adding a number to that.
And then inside the arrow function, I'll put in number.
So this statement that you see right here
is going to iterate over every object
in the seen indexes array
and just pull out and return the number.
So the result will be a list of numbers
that we want to print on the screen.
So to then make sure that they get printed out
with a nice little comma in between each one,
I'll add on a .join.
And to that I'll give a comma and a space
right after it like so.
And so this is going to take all those numbers,
all the numbers in that array and join them together
with a little comma and print them out very nicely
on the screen.
Okay, so that's it for renderSeenIndexes.
Now for calculated values, we'll do something very similar.
Underneath calculated values h3
I'll place a set of curly braces,
and we'll define a helper method called renderValues,
and call it with a set of parenthesis.
So this will be our helper method
that will render out all the calculated values
that we've ever worked with inside of our application.
I'll again make a helper method
right above the render method
and I will call this one renderValues, like so.
Now in the cases seen indices or seen indexes,
we were getting back an array of objects.
That's the default return type
when we were pulling data out of Postgres.
And remember this list of data right here
all being handled by Postgres.
Where's our diagram?
Here we go.
The calculated values table down here is all data
that is stored inside of Redis
and we when we pull data out of Redis,
we're actually going to get back an object
and that's gonna have a bunch of key value pairs
inside of it.
So to build out that little table of values,
we're gonna do just a little bit different iteration logic
inside of here.
I'm gonna first make a new array called entries.
We'll then iterate over all of the values
that we have in the state values object.
And then for every key inside there
where the key represents the index of the Fibonacci number,
we're going to push a new entry into that entries array.
So I'll say entries.push
and then open a set up a set of parentheses here.
I'll put in a div that's gonna get a key property
'cause we are building out a React list.
And inside there I'll say for index key,
I calculated this.state.values at key, like so.
And then at the bottom of render values,
I will return that list of entries that we created.
Okay, so this looks pretty good.
Now very last thing we have to do
is set up some event handlers on both the input tag
and the form to watch for any time
that a user enters in some text
and then presses the submit button.
So I'll first start off with the input.
I'm gonna give myself a little bit of space here.
I'll add on a value property
to make this a controlled input.
And the value property that we want to update here
is going to be index.
So back on the input tag,
we'll do this.state.index.
We'll do an onChange that's going to be called within event.
And we'll take that event and update our state.
So indexes event.target.value.
I'm gonna zoom out again
just so you can see that entire line.
Okay, now the very last thing we do,
we need to watch for any time that a user submits the form.
So on the form I will add on a onSubmit event handler
and that will call a callback that we'll call
about something like handleSubmit.
So now we just have to watch
for the handleSubmit event helper to be called.
Let's make sure we define that helper method.
I'm gonna go above renderSeenIndexes right here
and I'll define handleSubmit.
Now we want handle submit to be a bound function.
So I'm gonna say handleSubmit equals
an arrow function like so.
This is going to be an async function
because we are going to try to send some information
to our backend API.
So I'm gonna mark it as async as well, like so.
Then inside of here we'll make sure
that we keep the form from attempting to submit itself
by calling event preventDefault.
And then we'll make a Axios post request to API/values.
And we're gonna send in an object
that has a key of index and the value will be
whatever the user just typed into that input.
So this.state.index.
And then after successfully submitting this to the backend,
I can then clear out the value of the input
by calling this.setState index will be empty string.
All right, so that's pretty much it.
Again, I know we're going through this extremely quickly.
I can't say it enough.
I'm just showing you this
in case you're a little bit curious
about how this stuff is working behind the Seens.
But we could just about got everything done
on the React side.
So let's take a quick pause right here
and we'll continue in the next section.