Todo List Web App With React And Vite – PART 3: Components Building

In our previous articles, we have set up our development environment with Vite and created the basic structure of our todo list web app using React. In this article, we will focus on building the components for our app.

Creating the Todo Component

The main component of our app will be the Todo component. This component will be responsible for displaying each individual todo item. To create this component, we will first create a new file named Todo.js in our src/components directory.

Inside Todo.js, we will write the following code:

    
    import React from 'react';

    const Todo = ({ todo }) => {
        return (
            <div>
                <input type="checkbox" checked={todo.completed} />
                <p>{todo.text}</p>
                <button>Delete</button>
            </div>
        );
    };

    export default Todo;
    
    

In this code, we have created a functional component named Todo. This component takes a todo object as a prop and displays the todo item’s text, a checkbox to mark the todo as completed, and a button to delete the todo.

Using the Todo Component in the App

Now that we have created the Todo component, we can use it in our main App component. Open App.js in the src directory and replace the existing code with the following:

    
    import React, { useState } from 'react';
    import Todo from './components/Todo';

    const App = () => {
        const [todos, setTodos] = useState([]);

        return (
            <div>
                <h1>Todo List</h1>
                <div>
                    <input type="text" />
                    <button>Add</button>
                </div>
                <div>
                    {todos.map(todo => (
                        <Todo key={todo.id} todo={todo} />
                    ))}
                </div>
            </div>
        );
    };

    export default App;
    
    

In this code, we have imported the Todo component and used it inside the App component to display each todo item from the todos state. We have also added an input field and a button to add new todo items, although that functionality will be implemented in the next part of this series.

Conclusion

With the Todo component built and used in our main App component, we have made significant progress in building our todo list web app. In the next part of this series, we will focus on adding functionality to add and delete todo items.