Today let's build a Todo List app using React JS and localStorage.
- IDE || Notepad xD
Create a React app using
npx create-react-app todolistin the terminal.
Open the Folder in your IDE by typing
code .in the terminal (if using Visual Studio) , in my case i am using VS Code
npm startin the terminal for running the app.
Here in the src Folder there are few Items to be removed as there is no need for them in our app.
Files to be removed :-
First Setup a Simple Front end , Here's the UI which i am using:-
Gist Of App.js
- Here while settingData we aren't using "setState" because the previous todo will be cleared. That is why we are using push method.
- We are setting the todo in the localStorage, So that we can get our todo's after refresh
- Assign the addTodo to the submit button.
- Map the State Data.
Here we need to pass the setState as
JSON.parse , else the state will get String as value
- for deleting , we will be using filter method and setting it to the state and pushing the data into localStorage
- Assign the handler to the delete button