In the last section we created a new component called fib and we added a couple of methods to it to
set to fetch some data from our back and API.
We're now going to 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 we're going to go to the bottom of the FIB class and define a render method inside
if you're going to return a little bit of GSX will return a div.
We know that we want to show a form to the user like this form right here.
So I'm going to make a form tab samea a form tag that has a label a text input and a button assigned
to it.
So put in a form or put in a label with some text like enter your index or put in an input and then
finally a button and for the button I'll give it some text 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 print out all the different values that have been calculated as well.
So for each of those two little tables right there I mean it lays an H three underneath the foreign
tag.
The first one will have a title or something like indexes.
I have seen and then the second one all gives 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 read US worker.
So for the first one I got to 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 dot render scene indexes.
So we need to define a helper method that will essentially just print out the list of all the indexes
that are back end has ever seen.
All go and define that helper method called render.
Seeing indexes right now right above the render method.
I'll add in.
Render seen indexes.
And then inside of here we're going to look at the value of scene indexes that we fetch when we called
fetch indexes right here.
So I will return this dot state DOT scene indexes now seen indexes just 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 going to map over the list of all those objects and I get to put in a function right here.
Notice how I've got the opening curly brace or some media parentheses right here.
I'm going to pull off just that number property that we care about by putting down a set of curly braces
like so and then adding an number to that and then inside the arrow function.
I'll put in number.
So this statement you see right here is going to iterate over every object in the scene 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 dot join and to that all give a comma and a space right after it like so.
And so this is going to take all of 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.
That's that's it for render scene indexes.
Now for calculated values we'll do something very similar underneath calculated values H 3.
I'll place a set of curly braces and we'll define a helper method called render values and call it with
a set of parentheses.
So this will be our helper method that will render out all the calculate 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 render values
like so now the case is seen indices or seeing indexes.
We were getting back in array of objects.
That's the default return type when we're pulling data out of postscripts.
And remember this list of data right here all being handled by postscripts whereas our diagram here
we go the calculated values table down here is all data that is stored inside of restis.
And we when we pull data out of retests we're actually going to get back an object that's going to have
a bunch of key value pairs inside of it.
So to build out that little table of values we're going to do just a little bit different iteration
logic inside of here.
We're going to first make a new array called entries.
Well then iterate over all of the values that we have in these 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 entry's array.
So I'll say entries push the open to set up a set of parentheses here.
I'll put in a div that's going to get a key property because we are building out a re-act list and inside
there all say four 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.
Goetz's looks pretty good.
Now the 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.
Sulphur start off at the input.
I'm going to 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 start states index will do an on change that's going to be called
with an event and we'll take that event and update our state.
So index's event that target that value.
I'm going to zoom out again just so you can see that entire line.
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 on Samit event handler that we'll call a callback that we'll call how
about something like handle submit.
Now we just have to watch for the handle submit event helper to be called Let's make sure we define
that helper method.
I'm going to go above render scene indexes right here and all the fine handle submit.
Now we won't handle Samit to be a bound function.
So I can to say handle submit 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 back
and API I in a market as a sync 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 prevent default and then we will make a X-ers
post request to API slash values and we're going to 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 outstate index.
And then after successfully submitting this to the back end I can then clear out the value of the input
by calling this dot set state 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 scenes but we could just
about got everything done on the rock side.
So let's take a quick pause right here and we'll continue in the next section.