React Context & Hooks Tutorial #18 - Reading List App (part 3)

Key Takeaways

okay then so we're making some progress here we've done three of the four components we need to create the last one we need to do is this book form right here and that is going to be a form that sits right at the bottom with two input fields inside it one for the book title and one for the book author so a user can enter those in submit the form and then that book is going to get added to the list so let's get cracking with this component first of all we need to import react and we also need to import a couple of other things we need to import use context because we will be using the book context and also use States because we want a piece of a local state inside this component as well or rather two pieces one for each of the input fields to track what a user types into them so down here let's create this component and we'll call this new book form and inside here the first thing I'm going to do is use context and the context that we want is the book context and then down here we can just say import book context and that's going to be from dot forward slash to come up a level then into the contexts folder then book context like so okay so we have this now and we want to D structure a single property from this and that is going to be the add book function right here so let's now say Const add book is going to be equal to this use context book context okay so we have that add book function available to us now in here now I also want to set up two pieces of state one for the title and one for the author so let me now say Const and it's gonna be title and set to title because remember you state returns as those two things inside an array the actual data and also a function to change the data and we set that equal to use state set an initial value for this which is going to be an empty string and I'm going to do exactly the same thing for author only it's going to be author and set author right here okay so now we can go about actually creating this template now it's gonna be a form so let's create that tag and inside we need an input field for the name of the book it's going to be of type text and then I'm also going to put a placeholder on this as well and that's going to be book title then after that I'm going to say the value is equal to this thing right here title and then I'm going to go to a new line so we've got some more room I'm going to say unchanged is equal to some kind of function which takes in the event object and in here what I'm going to do is update the state of title so to do that we say set title and we want to pass in the value that the user types in to this input field and we can get that by saying e target dot value like so and that's all we pretty much need to do right here so let me now close this off like so and in fact we'll just add on a required attribute as well because this will be a required field so we've done the first one now let's copy this because I also want to do this for the second input field which is going to be the author so we'll just say author right here for the placeholder the value is going to be the author variable right here and also we want to update set koala third not set title so let's update that there and that is everything so we also need one more thing at the bottom and that is just a submit button so I'll say input type is equal to submit and I'll say value is equal to add book like so and that's all we need so then if I was to nest this now in the app KS we should see it let me do that underneath book list I'm going to say book I know it's new book new book form there we go and it also imports it for me so I'm going to nest up there save it and preview and we can see this over here it doesn't look great at the minute but if we type something in at the minute and AD book then it's not gonna do anything special it just refreshes the page which is the default browser behavior when we submit a form what we need to do is attach an event listener to this so that when it's submit we do our own thing so let's say on submit that's equal to some kind of function which we'll call handle submit and we need to define that up here so we'll say Const handle submit and set that equal to an error function we take in the event object because we need to prevent that default behavior so I prevent default to begin with and then what I'd like to do is just log to the console the title and the author to see if this is working and we're tracking these input fuels so save that and blah-dee-blah ID book yet we see those right there so this is working is capturing that data so now let's get rid of that and what we'd like to do is use this function at Bucknell so ad book and remember if we go to the context it takes two parameters the title and the author so let's pass those in so we have the title and the author here storing those variables title and author and once we've added the book and then also like to reset these values so I'm going to say set title and that's going to be an empty string again and then set author and that will also be an empty string again okay so now this should all work let me try this out just enter in any old rubbish at the book and there we go it works try it again and it works and we can still click these off so that's all working them the last thing I'd like to do is just make this look a bit better so again I've got some CSS that I'm just going to copy and paste from my repo let me come into index dot CSS and we can see we have the form which has a padding of 20 pixels the input fields with a type of text they have a width of 100% padding of 10 pixels box sizing of border box so it takes into consideration the padding margin of 6 pixels top and bottom we give it a background color of this kind of deep full text color of white and then a bullet was zero then the submit button we just give a bit of margin top and bottom the background is a light gray no border a bit of padding and then display as block some very simple styles save that and now it looks a little bit better so if I type in here the final Empire and Brandon Sanderson awesome book at the book there we go all works summer friends now we have kind of completed this ninja reading list but there are two more things I'd like to talk about in this series the first one is going to be all about reducers and we're going to implement that into this application as well shortly and the second one is local storage I want to hook this up with local storage so that when we refresh we don't just get the dummy data we'd get whatever is stored in local storage in the browser so we'll start with reduces and we'll talk about what they are in the next video