React Todo Item Component (Props + Toggle Complete/Incomplete)

📌 INTRODUCTION

Todo applications are one of the most common beginner projects in React. They help you understand:

• Component structure
• Props usage
• State and event handling

In this program, we will create a Todo Item Component that:

• Displays a task
• Shows completion status
• Toggles between completed and incomplete

👉 This is a foundation for building full Todo apps.

---

📘 PROBLEM STATEMENT

👉 Build a React component for a todo item, accepting props like task, completed, and onToggle.

---

💡 CONCEPTS USED

• React Props
• Event Handling
• Conditional Rendering
• Component Reusability

---

🧠 LOGIC EXPLANATION

1. Pass task and status via props
2. Display task name
3. Apply style based on completion
4. Toggle status on click

---

💻 PROGRAM CODE

---

Step 1: Create TodoItem Component

function TodoItem({ task, completed, onToggle }) {
  return (
    <div style={styles.item}>
      <span
        style={{
          textDecoration: completed ? "line-through" : "none",
          cursor: "pointer"
        }}
        onClick={onToggle}
      >
        {task}
      </span>
    </div>
  );
}

const styles = {
  item: {
    padding: "10px",
    borderBottom: "1px solid #ccc"
  }
};

export default TodoItem;

---

Step 2: Use in App.js

import { useState } from "react";
import TodoItem from "./TodoItem";

function App() {
  const [todos, setTodos] = useState([
    { id: 1, task: "Learn React", completed: false },
    { id: 2, task: "Build Project", completed: false }
  ]);

  const toggleTodo = (id) => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div>
      <h1>Todo List</h1>

      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          task={todo.task}
          completed={todo.completed}
          onToggle={() => toggleTodo(todo.id)}
        />
      ))}
    </div>
  );
}

export default App;

---

🖥️ OUTPUT

👉 Initially:

Todo List
Learn React
Build Project

👉 After clicking:

Learn React (crossed)
Build Project

---

🔍 STEP-BY-STEP EXPLANATION

• Props (task, completed, onToggle) → pass data and function
• textDecoration → applies line-through when completed
• onClick → toggles state
• map() → renders multiple todo items

---

⚡ ADVANCED FEATURES

1. Add Delete Button

<button onClick={onDelete}>Delete</button>

---

2. Add Checkbox

<input type="checkbox" checked={completed} onChange={onToggle} />

---

3. Add Input Field for New Tasks

👉 (Use useState to capture input)

---

🎯 WHY THIS PROGRAM IS IMPORTANT

• Combines props + state + events
• Builds foundation for real projects
• Very common interview question
• Demonstrates React thinking

---

🌟 REAL-WORLD USE CASE

• Task management apps
• Notes apps
• Project tracking tools
• Productivity dashboards

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is a Todo component?

👉 A component representing a single task.

---

Q2. What is onToggle?

👉 A function passed as prop to update state.

---

Q3. Why use map() here?

👉 To render multiple todo items.

---

Q4. What is conditional styling?

👉 Styling based on state or props.

---

Q5. What is component reusability?

👉 Using same component multiple times.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Product Card – Program 11
👉 React Props – Program 10
👉 React Counter App – Program 6

---

📌 CONCLUSION

The Todo Item component is a key building block for React applications. It teaches how to manage state and interact with UI dynamically.

👉 Master this to build complete Todo apps and real-world projects.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites