Create Todo in React JS with typescript?

Creating a to-do application in ReactJS is a great first step towards upskilling. However, incorporating TypeScript into your project will also be beneficial for improving your TypeScript skills.

This blog post will teach you how to create a basic to-do app using TypeScript. The app will include essential features such as:

• ⚒️ Creating new tasks
• ❌ Deleting tasks
• ↕️ Updating tasks
• ✅ Marking tasks as complete

Getting Started With Vite.

npm create vite@latest

npm install

npm run dev

Now the basic folder structure will look like this.

Do not worry in case you have any additional files.
I have set up the tailwind CSS if you don't know how to set up tailwind CSS in React JS click here.

Here are the components/modules we are going to develop:

• Navbar
• Form
• Todo List

Create components/Navbar.tsx

• create a basic navbar with a title and about.

Attach the navbar in app.tsx

Create components/Form.tsx

• Create this basic form having an input field and a button "Add".
• and a use state for getting value from the input field.

** However there is a problem in this code. **

• the problem with the typescript.
• because we are using typescript we are supposed to tell the datatype or what type of value It will hold in future to state(task).
• and our state is empty there it will be considered undefined only.
• and below in the input field, we are assigning a string to the state in onChange.
• but the task(state) value was supposed to be undefined.

fix:

• the value it will hold must be a string.
• which will come from the user input.

Add onClick functionality

Import Form in App.jsx

Create a global state of tasks array

• create an array of tasks.
• A task interface consists of a single task.

• pass the setTasks to the Form component.
  

  • accept task the setTask in Form component.
  • the type of prop would be: React.Dispatch<React.SetStateAction<task[]>>
  • in the typescript which type of props you are going to receive is required to mention.
  • in this case, setTask is a State action.

• and on the onSubmit function we have pushed the task value (local state) to tasks (global state array).

Form.tsx

Create components/Todos.tsx

• which will accept global state tasks.
• and retrieve over through it.

Final app.jsx

Output