GraphQL Tutorial #30 - Updating Component State

all right there my friends so now we're in a stage where we've got this forum and we want to kind of hook up the functionality to it so that when a user adds some data into it and selects an author press ease plus or add then it's going to make some kind of mutation on the graph QL server and add that data to the database and update the UI here right with the new book so we're going to do this over a series of 1 or 2 videos because there's a few different steps involved the first step is to declare a state for this application to keep track of a few different things we want to keep track of the value of each one of these input fields right so we're going to do that then what we're going to do is attach an event to this thing right here so that when we submit the form it's going to take that state and do something with it eventually it's going to make a mutation on the graph cue our server right but for now what we'll do is maybe just log of the state to the console so we can see what the user has typed in here or selected so let's go ahead and do that to begin with so right now in the code we have our ad book GS component so the first thing I'm going to do is set up the states of this component so we'll do a constructor right here which takes in the props and let me just line this up a little bit all right so inside here we say super props I'm not going to delve into all of this right now this is kind of convention in class-based components in react so then we can say this dot states is equal to an object right and inside this object we can keep track of the different form fields in our component the state of those form fields if you like so to begin with the name is going to be an empty string right and the genre is going to be an empty string and then the author ID is again going to be an empty string this is the initial state of this component because nothing has been selected or typed in our form but as we do type into our form or as we do select an author this state is going to be updated okay so the next thing we need to do is come down here and update the state of this component when I use a DES type something into the farm field or select something down here so let's do these things first of all right so what we need to do is attach an unchanged kind of listener to this farm field so inside here we're going to do an es six arrow function we'll take the event object and pass it through to the function and we're going to say this dot set state which allows us to change the state or set the states and what we want to do is pass through an object with the different parameters we want to update in the state now we want to update the name parameter in this case because this is for the book name so we're going to set the name equal to e which is the events right here dots target which is this input field the target of the event when this changes dots value so it's going to grab whatever is inside this input field at that point when it changes so if I type a K into this input field what it's going to do is detect that fire this function here and update the state so that the name becomes K right if I update it with ke then the state the name property of the state will become gay e so we need to attach this now to not just this but also down here we'll paste that in and instead of name we now want to update this to the genre and then finally we want to add it to this thing the select over here so that when a user selects something and the Select field changes we're going to update the author ID right so remember when we output the options here the value is the author ID of each option so when we select one right here we fire this function and we get the value of that option okay I hope that makes sense so what updating the state here the next thing we need to do is attach an event listener to this thing right here the form so that when it's submitted we fire some kind of function so to do that we'll say on submit set it equal to this to refer to this component dot submit for we've not created this function yet what we will do in a minute and what also going to bind the context of this at this moment in time because this right here refers to the component itself and we want to bind that context to this function so that when we call this inside this function it's also going to refer to the component itself okay so let's create that function now we'll do it beneath the display of this function so and to submit form and we're going to take through the event object as a parameter we can do that when we're reacting to an event right here okay it automatically takes that event object inside what we're going to do is prevent the default action from occurring now previously inside the browser if we type in a load of garbage here and then click on add then all it does is kind of refresh the page that there my friends is the default behavior of this event so now now we want to stop or prevent that default behavior so what we need to do is call a method on this event right here this is not react code this is just general JavaScript and we're going to say prevents default so that prevents the default behavior of this event and it's no longer just going to refresh the page right it's not going to do that then what I'd like to do is console dot log the state of this component so this thing right here so we're going to say this dot States remember we said bind the context of this to this function so inside this function this refers to the component itself so we can say this dot States right so just quickly again we've attached these unchanged listeners to each input type these two text inputs and the Select now when we have a change for example when I select something or when I type something into these fields we're going to call this function which is setting the state of the component in this case it's set the name to the target value so the value inside this input field whatever text is there in this case it's the genre and in this case it's the author ID right because that's the author we selected so when we update the state here it's updating the state properties the name the genre and author ID so when we're finished and we click on the button to add the author at the end what we're doing is calling this function right here and binding the context of this so when this function fires were preventing the default action on the event then what we're doing is logging this state so whatever values are on the name genre and author ID property at that time we're gonna log those to the console okay so let's save all this let's check it out in a browser and now if I say book name bla genre blah blah as you can tell I'm terribly original and will select an author to be Brandon Sanderson click Add then we get this log to the console first of all it did not refresh the page that's because we prevented that default action and so the state's now is logged to the console we have the author ID right here which is the author ID presumably of Brandon Sanderson the genre blah blah and the name blah so we've successfully garnered that information from the form we know now what book the user wants to add to the data to the list if you like so we'll stop there for this tutorial but in the next tutorial we'll look at taking this data and see how we can make a mutation on the graph to our server with it to add this new book to the database