Lifting state up with REACT - Tutorial

let's say we have a to-do list app in react so somewhere in the app we would have a component which displays the list of all the to-do's let's call this component to-do list this component has a list of all the to do's and for every to-do it renders a to-do item component which displays the title of the to-do now we want to be able to click on a to-do item to select it and then click a button in the to-do list component which deletes all the selected to do's here is where lifting up the state comes in handy but let's first try to implement this without thinking too much about it so we might create a state variable in the to do item component which indicates if this true item component is currently selected or not then we might set an onclickhandler which updates the state variable then we just need to create the delete button but here we stumble upon a problem because in the onclick function we want to delete all the selected to-do's but in order to do so we need to know which these are but the state which holds the information which to-do items are selected is distributed over all the to-do item components and therefore we need to store the information which to-do items are selected in the to-do list component we are lifting the state up from the to-do items to the to-do list component we can do that by passing a callback function down from the to-do list component to the to-do item components via the props which is called when the to-do item is clicked this callback then sets the state of the to-do list component so that it knows whether the to-do item is selected or not let's implement this so i have already created the base project and you can see we have the to-do list here and we have already some to-do's which i can select or deselect and then we have the delete button here but when i click it nothing happens here we have our app component which renders a to-do list component and the to-do list component has a state which holds a list of to-do's and it renders a to-do item component for every to-do and the to-do item component looks like this there you can see it has a state which stores information if this item is currently selected or not and depending on that state a different class name is used here we have here this getclassname function which returns different class names depending on whether the component is selected or not so the first thing we need to do is we need to go into the to-do list component and yeah we want to lift the state up so we add a new property to our to-dos which we call selected and because in the beginning no to do should be selected we initialize the property with the value false and now that we have lifted up our state we can go into the to do item component and there we can remove this selected state variable and we can also make this on click empty and then we get an error because now it doesn't know the variable selected so we change this to the selected property of the to-do and now when we save it then selecting the items doesn't work anymore because we have to put this functionality into our to-do list component but let's first see if this worked so when i set this to true then you can see that our first to do is marked as selected so now we know that lifting up the state was successful so i set it to false because we don't want that the items are selected initially let's recap real quick what we just did so previously inside our to-do item the to-do item component had a state variable created with the u-state hook and this was always true or false depending on whether this true item was selected or not and there was this on click function which was set as the on click handler of the to-do item component and every time when the user would click the to-do item component this on-click handler would flip the value of this selected state variable and remove the information whether a to-do item component is selected or not into the items of this list inside the to-do list component so every to-do now has a property which is called selected which determines if this to-do item component is selected or not and then inside our to-do item we can get the information from the to-do that is passed via the props so before we only use the title property of our to-do that's the title for example exercise or laundry but now we also use the selected property and now it's time to again etch the functionality that when you click on a to do item that it gets selected and we do this by receiving a on click prop so an onclickhandler function which is passed from the to-do-list component down to our to-do item component and then we can remove this onclick function here and we set the onclickhandler to an arrow function which does nothing else than calling the onclick function that we receive as the prop so on click we call the unclick function and then we pass in the id of the to do so to do dot id and then we switch over to our to-do list component and there we create a function which we call on to do item clicked and it receives the id of the to-do and then we pass it as the on-click prop to our to-do items so when i add a console.log statement here which says hello world and then we also want to print the id and then i open up my console i reload and then when i click it you can see this on to do item clicked function is called whenever i click on one of the to do items and we also receive the correct id here and inside the onto do item click function we want to use the id that we receive as the argument and then search inside the to-do's list for the to-do which matches this id and then we want to flip the selected property so in order to update our state which holds our to-do's we have to first make a copy of our to-do's so i'll create a variable which i call new to use which is just the copy of our to-do's and then we need to find the to-do which matches the id that is passed as the argument and we can do so by calling the find method on our new deduce array and we pass in an arrow function which checks if the to-do id equals the id that is passed as the argument and then we just toggle or flip however you want to name it the selected property of the to do and then we just have to set our new to use array as the new state and when i click on the to do items now then you can see that they get selected so our on to do item click function works as expected and finally we just have to add the functionality to the delete button so we create a new function which i call delete selected and then i create a new variable which i call new to juice which should only contain all the to-do's that are currently not selected so i can just write to do's and then call the filter method on it and then i supply it with an error function which receives a to do as its argument and then we check if this to do selected property equals false and then this new toduce variable will contain an array which only consists of all the to do's which are currently not selected and then i set this as the new state so i call set to dose and i set it to new to do's and then finally i just have to assign this as the on click prop of our delete button so now when i select two items and i click on the delete button then you can see that the items are removed and that's it for today's video please give this video a thumbs up subscribe to my channel and hit the notification bell

Channel: Olli

Views: 4,316

Keywords: Lifting state up with REACT, state, lifting state up, react, javascript, beginner, programming, tutorial, course, lesson, useState, hooks, functional component, todo, map, list, events, onClick, html, css, react hooks, hook, useEffect, learn reactjs

Id: ahKsy1FS45k

Length: 8min 49sec (529 seconds)

Published: Sat Jan 30 2021