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)
