React Native Tutorial #11 - Todo App (part 3)

Key Takeaways

or rather than going so were two-thirds of the way there we have our head and now we have the list as well and when we click on one of those items it deletes that item from the list the last thing we need to do is create now a little form at the top up here so when a user type something into that then it clicks on a button to submit it it gets added to this list right here sure to do that first of all we're going to create a brand new component so we can split out all of this functionality into that component and that is going to be called add to do so add to do j/s and at the top again we're gonna import a few different things again because I'm so lazy I'm gonna copy all of that jazz and paste it all right here now inside this one we do need the use state hook because we're going to keep track of what user is typing into a specific text input so let me import that as well use state like so we also don't need touchable opacity but what we do need is a text import and a button so let's replace that with text input and also add a button as well okay so now down here we need to create the component so let's say export default function and we're going to call this add to do and in here eventually we're going to take some props but for now let's leave that and inside the first thing I'd like to do is return some kind of template so I'm going to say return and then in that first of all we'll do a view and then inside the view we need a text input so let's create that text input and this text input is self closing but we also need to add a few different props so let's do that first of all I'm gonna add a placeholder and that is going to be equal to new to do dot dot and then secondly we're gonna have an on change text Handler remember this fires a function whenever a user typed something into the actual field itself and I've just noticed a comma over there we don't hit up so let me delete it okay so now over here what we're going to do is create a function called change handler and I will reference that change handler like so and we need to create that function up here so Const change handler is equal to a function and that function is going to do something later on it's going to interact with some kind of state so that we can keep track of what I use it is typing into the input field so what I'd like to do now is actually create a piece of State at the top which is going to keep track of what a user types in so let me do that by saying Const and then text and we also need set text like so and set it equal to use state like so and to begin with it's going to be an empty string so this is going to keep track of what I use the types in to the input field now when a user does type in and we fire this function over here all we're going to do is say set text and we're going to pass in the new value we need to take that in as a parameter right here remember when this fires it automatically takes in the value this is the same as doing this firing an anonymous function which then fires the change Handler inside it and passes in the value okay so that's exactly the same as what we did right here so if we just take off this and this it still passes the value automatically of the text input field into that function and we can receive it right here okay so when we set the text we're going to pass in this value right here okay sort it now also we need to add a style sheet because I want to give a style to this text input so let me first of all say style is equal to styles dots input and then down here let's create that style sheet so I'm going to say Const Styles is equal to style sheet dot create an inside here pass an object and then we need a property called input and the input is going to have a margin bottom of 10 pixels just to give it a bit of breathing space and then it's also going to have a padding horizontal and that is going to be around eight pixels it's going to have a padding vertical so up-and-down direction and that is going to be six pixels it's going to have a border bottom width so we're just applying a border bottom to this and that is going to be one and then also we need a border bottom color and that is going to be DT D which is a light gray now I need to spell this correctly border bottom okay so we have this basic component now it's a DES to do with this text input field what I'm going to do is now import this inside fjs so let's go over here and say import ad to do and that is going to be from forward slash components /ad to do okay so now we can nest it down here ad to do like so and we should see that form up at the top okay we get an error and that's probably because inside ad to do we don't have the view imported no we don't select import that and then let's save it again okay cool and now we can see it so now as we type into this we're going to be keeping track of the value in our state right here okay via this change handler so the next thing I'd like to do is add a button to this component so when we click it we're going to take the value and we're going to create a new to do and add it to this state right here so let's do that let's add a button first of all below the text input so button and then this is gonna have a on press prop and that is going to be defined in a second we also need a text prop and that is equal to what is shown on the button so ad to do like so and then finally we need a color prop you know I said we can't style buttons well we can't have the style prop but what we can do is add a color prop like this color is equal to something and I'm going to a coral and that just colors it different so at least it looks slightly better so inside this on press we need to add some kind of function now I'm gonna do an anonymous function for now and all it's going to do is console dot log whatever oops not console dot group console dot log whatever the current state is so text well let me do that and save it so then now if I try this out and I've made a whopping Garrett because I've said this should be a text prop and instead it should actually be title okay so save that and then hopefully this will work and then we can see at the top we have this if I type in say testing one two three and then click on add to do it should log that to the console so let's open up these tools and we can see testing one two three awesome so this works but instead of doing this what I'd like to do is take that to do and add it to this thing over here now remember if we want to interact with this state we can't create a function over here to do that because the state is not here it's over here so we need to create a function inside this component to do it so I'm going to create now a function called submit handler and that is going to be equal to an error function it's going to take in the text which our user types in right so we'll pass that into it and then inside here we're going to use set to dues which is this function to update the state now this is going to take in a function as an argument because we're going to rely on the old to dues or the previous to dues so let me take those in prove to dues and inside this function we're going to return a new array so return and what we want to do is return the new array with all of this stuff in it but also the new item as well so I'm going to return a new array like this and then inside that we're going to add dot rev to do so this is the spread operator and what it does is take everything inside this this array right here the previous two dues and it spreads them into this array so we're getting all of the current ones but also we want the current to do the new one with this text so to do that all we need to say is okay before it add another object and place your comma after it and then that object is going to have a text property because it has a text property and the text is going to be whatever text is sent in so text is equal to the text and then also we want a key now the key is just a string so to generate this I'm just going to use a bit of jiggery-pokery I'm going to say the key is going to be math dot random to generate a random number then turn it to a string by saying to string like so now I know this is not the ideal way to create a random ID or key you could import another library to do this for you or you could create a more sophisticated function to do this for you I'm just using this because it serves the purpose of this tutorial the likelihood of this generating two identical numbers is pretty small so I'm good with this for now okay so now we're returning a new array with the new object with that text right that we're going to pass through and the previous to do so all of the current stuff as well so the new state is going to be this array all right so we need to actually call the submit handler from this component right here when we press on the item so to do that we're going to have to pass this function submit handler as a prop to this ad to do component so let's say submit handler is equal to submit handle it like so so we've passed it through as a prop now inside add to do we can destructor it up here so submit handler like so and then down here we instead of logging it to the console can call submit handler and pass in that text so we call that function it takes in the text into that function it sets that to dus which is a function that takes the alter news it returns a new array which is going to replace the state up here that new array is going to contain a new up and the text is going to be whatever text we pass into it which is this value down here the value were tracking when they type something in the input field and we're generating an ID for that object as well or a key and then also spreading the previous to do so all of this stuff into that new array as well so that's going to update the data and that change will then be reflected over here on the screen so let me save all of this and cross my fingers and hope this works so let's add a new to-do go shopping and I'm gonna press add subdue and whoohoo we can see that now we can see go shopping is right here awesome so there we go that is our to-do list pretty much done now and by the way if we click on that new one it should disappear as well yep it does and these still work and I can add new to dues and everything seems to work awesome now there is one problem with this say I add load of to do like this and I'm just gonna randomly add weird gobbledygook stuff let me delete all that and start again you know blah blah blah let's just say I'm adding all these different two dudes right now if I take this keyboard down I can't actually scroll all the way down to the first one it Scrolls a little bit but the first one is go shopping but we had all those other ones below it these original ones so it's actually kind of sitting off down here at the original ones and I can't scroll all the way down to those now that's happening because the flat list component in app KS so this thing right here is actually going from here off the page so it's scrolling down the flat list but it's still sitting down here the bottom of it and that's because it's being pushed down by all of this content at the top here so we need a way to bring all that back up and to do that we'll have to talk a little bit about flexbox now we're going to come back to this problem later on and address it then after we learn about flexbox in about two or three lesson this time but first though I just want to add a couple of last features to this up