Line 12 & 18: we have already discussed about both of these method. Line 1-9: Contains all the requried imports. Make sure to import DisplayTodos.js component in the App.js file right after the Todos component. Open DisplayTodos.js and write below code. Now let's use this component inside the DisplayTodos.js file. we have to pass id of the item we want to remove in this method. Line 48: This remove button is connected with the remove method. It is connected on onKeyPress in the textarea at Line 32. Then when you press the enter key then it will call the updateTodo method and pass all required things as object and disable the textarea. It will take 3 arguments, id, updated value and event. Line 16: This function is used to update value of the todo item.
This function is connected with the edit button. Line 11: This change Function will enable the textarea and adds focus on it. Line 30: here, we have used ref value for the disabled attribute, which means while ref is true until then textarea stays disabled. Line 9: It is a ref which is connected with textarea.
span -> after these buttons there is one span element which shows done, and it will display only when pleted is true. buttons -> after text area there are 3 buttons which contains icons for edit, update and remove, this buttons are connected with all required methods. textarea -> it shows the todo text as default value. Line 23: Here in the return Inside this li element you can see, removeTodo -> method to remove todo item. completeTodo -> method to set todo is completed. item -> contains all the data of single todo item. Line 7: These are the all required items that we have to pass while displaying TodoItem* component. Line 2 & 3: This contains import of icons from react-icons library, we will use this icons in edit, update and remove buttons. and 3 methods connected with these buttons. Now as you saw in the demo each todo item contains 3 buttons edit, completed, delete. You must have basic understanding of Redux to follow this tutorial, don't worry if you don't know the basics of Redux you can visit my channel, there is playlist to learn redux.įirst, The below is the folder structure for this small project so make sure you create it. If you prefer to code along with the same steps while listing to music you can watch this video 👀: 
How to use Framer-Motion for awesome animations. In this tutorial we're going to build this TODO app with animations using Framer-Motion. Now please if you're starting this tutorial watch till the end because doing it half won't teach you anything. Here is the demo of what we're going to build in this tutorial.👇👇 I know building TODO List always won't get you too far😴, But It can teach you basic concepts and implementation of particular framework.
0 kommentar(er)
