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.

React todolist with database