-: Now for sending an HTTP request
we can use the fetch function.
That's a default JavaScript function built into JavaScript.
It has nothing to do with react.
It's a standard JavaScript function supported
in modern browsers,
and it is a function that allows us to send HTTP requests.
We could also use third-party packages like axios
which has all the popular library for sending HTTP requests.
But I don't want to install an extra library here.
So I'll stick to fetch.
Now fetch wants an argument
and the first argument should be a string.
It should be the URL to which we wanna to send a request.
And here that states URL which we get
from the Firebase real-time database console.
Now this Firebase real-time database service works such
that this URL can be manipulated.
We can add segments after this domain.
And then these segments will be translated into folders.
You could say in your database into tables,
you could say, so we could send the request
to this URL/meetups.
And that would add a meetups table, a meetups collection
to that database here.
And hence, I'll do that here.
Now, one special thing about this Firebase API is
that you need to add dot json at the end here.
That's not react specific.
That's just something Firebase requires.
And with that,
that is the URL to which we're sending our request.
But here I actually wanna store data
on Firebase servers and to signal to Firebase
and to this API that we want to store data,
we actually must send a post request
and by default fetch sends a get request.
And that will always depend on the API you're working with.
But most APIs are built such
that storing data requires post requests.
Now to send a post instead of a get request
we add a second argument to fetch here.
And that second argument is an object which allows us to
configure this fetch function call
and this HTTP request, therefore,
and here in this object we can, for example,
set a method property to define the age
to DB method that will be used.
And here we can set this to post instead of get
which would be the default.
So here we use post instead.
Now, when we send a post request
we should also add the data to the request
the data which we wanna store.
And we do that through the body field, which we add
to the second argument to this configuration object.
Now body wants the data we wanna append
and that data should typically be in json format
which is a very popular, the most popular.
I would argue data format for transmitting data
with HTTP requests and in Java script
we can easily create json
by using the built in json object
and calling the stringify method,
and choose stringify
we can pass default JavaScript objects or a raise
or values in general, and they will be converted to json.
So here we could pass our meetup data object
which we're getting as a parameter
as argument to the stringIfy method.
Now, last but not least
we can add some extra headers if we want to.
And for example, adds to content type header and set it
to application/json, to add this extra metadata
to the outgoing request and make it crystal clear
that this request carries json data, some APIs
also required this, and with that
we're sending such a post request.
We can do more with fetch.
We can listen to the success and error cases
and we do that in the full react course, which I offer.
But for the moment here, this is actually enough
because this will already sent a post request
with our data to Firebase.
And hence, now here, if we saved this
and I click on add meetup now with data entered,
we don't see any feedback here.
We'll work on that in a second.
But if we go to Firebase
we see that there is a new meet-ups node.
And in that note, we got this cryptic ID here,
which is actually auto-generated by Firebase.
And if we expand this, we see our submitted data.
So storing that data on Firebase servers works.
Now let's work
on the feedback which we provide to the user here.
When we add a meetup.