In this part, we’ll implement a simple task manager using React. The application lets users add tasks and move them between different stages of completion — from “To Do” to “In Progress” and finally to “Done”. Each stage clearly reflects the current status of the task, and users can control progress manually using intuitive buttons.
Before building the task manager application, we need to set up a React project that will serve as its development and execution environment.
Editing App.jsx
To implement the task manager application, begin by opening the file App.jsx located in your project's src folder.
This file is the main component of your React application. It contains the structure (HTML-like JSX), interactive logic, and rendering logic for your user interface.
Replace the contents of App.jsx with the following code:
import React, { useState } from 'react';
const App = () => {
// Initialize task lists for each column
const [tasks, setTasks] = useState({
todo: [],
inprogress: [],
done: []
});
// State for new task input
const [newTask, setNewTask] = useState('');
const [showInput, setShowInput] = useState(false);
// Move a task from one column to another
const moveTask = (task, from, to) => {
if (from === to) return; // Ignore if target is the same
setTasks(prev => ({
...prev,
[from]: prev[from].filter(t => t !== task), // Remove from source
[to]: [...prev[to], task] // Add to target
}));
};
// Add a new task to the "To Do" column
const addTask = () => {
if (!newTask.trim()) return; // Ignore empty input
setTasks(prev => ({
...prev,
todo: [...prev.todo, newTask.trim()]
}));
setNewTask('');
setShowInput(false);
};
return (
<div style={{ display: 'flex', gap: '20px' }}>
{/* To Do Column */}
<div>
<h3>To Do</h3>
{!showInput ? (
// Show button if input is hidden
<button onClick={() => setShowInput(true)}>Add Task +</button>
) : (
// Show input field and save button
<>
<input
value={newTask}
onChange={e => setNewTask(e.target.value)}
/>
<button onClick={addTask}>Save</button>
</>
)}
{/* Display tasks in To Do */}
{tasks.todo.map((task, i) => (
<div key={i} style={{ display: 'flex'}}>
{task}
<button onClick={() => moveTask(task, 'todo', 'inprogress')}>→</button>
</div>
))}
</div>
{/* In Progress Column */}
<div>
<h3>In Progress</h3>
{tasks.inprogress.map((task, i) => (
<div key={i} style={{ display: 'flex'}}>
<button onClick={() => moveTask(task, 'inprogress', 'todo')}>←</button>
{task}
<button onClick={() => moveTask(task, 'inprogress', 'done')}>→</button>
</div>
))}
</div>
{/* Done Column */}
<div>
<h3>Done</h3>
{tasks.done.map((task, i) => (
<div key={i} style={{ display: 'flex'}}>
<button onClick={() => moveTask(task, 'done', 'inprogress')}>←</button>
{task}
</div>
))}
</div>
</div>
);
};
export default App;
Running the Application
Once you’ve saved the file, navigate to your project directory in the terminal and start the development server using the following command:
npm start
After a few seconds, the development server will be running.
Open your web browser and navigate to the following URL to view your application:
http://localhost:3000/
There you will see a working To Do List application, where you can add tasks, and move them across three stages: To Do, In Progress, and Done using intuitive buttons.
See also