Prop drilling and Using Context API

context-App.jsx

import { useState } from 'react'
import { TodoProvider } from './TodoContext/TodoProvider'
import TodoInput from './TodoContext/TodoInput'
import TodoList from './TodoContext/TodoList'
import StatusBar from './StatusBar'

function App() {
  return (
    <TodoProvider>
      <TodoInput />
      <TodoList />
      <StatusBar />
    </TodoProvider>
  )
}

export default App

context-StatusBar.jsx

import TodoStatus from './TodoStatus';

export default function StatusBar() {
  return (
    <>
      <TodoStatus />
    </>
  );
}

context-TodoInput.jsx

import { useContext, createRef } from 'react';
import { TodoContext } from './TodoProvider';

export default function TodoInput() {
  const ref = createRef();
  const { todoText, setTodoText, addItem } = useContext(TodoContext);

  const updateTodo = (event) => {
    setTodoText(event.target.value);
  };

  return (
    <div>
      <input type="text" ref={ref} value={todoText} onChange={updateTodo} />
      <button onClick={addItem}>Add</button>
    </div>
  );
}

context-TodoList.jsx

import { useContext } from 'react';
import { TodoContext } from './TodoProvider';

export default function TodoList() {
  const { getItems, deleteItem } = useContext(TodoContext);

  return (
    <ul>
      {getItems().map((item, index) => (
        <li key={index}>
          <input type="checkbox" />
          {item.todo}
          <button onClick={() => deleteItem(index)}>X</button>
        </li>
      ))}
    </ul>
  );
}

context-TodoProvider.jsx

import { createContext, useState } from 'react';

export const TodoContext = createContext();

export const TodoProvider = ({ children }) => {
  const [todoText, setTodoText] = useState('');
  const [items, setItems] = useState([]);

  const addItem = () => {
    if (todoText.trim() === '') return;
    setItems([...items, { todo: todoText, complete: false }]);
    setTodoText('');
  };

  const deleteItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  const getItems = () => ([ ...items ]);

  const getTodoInfo = () => ({
    allTodos: items.length,
    completedTodos: items.filter((item) => item.complete).length,
    incompleteTodos: items.filter((item) => !item.complete).length,
  })

  return (
    <TodoContext.Provider value={{ todoText, setTodoText, addItem, getItems, deleteItem, getTodoInfo }}>
      {children}
    </TodoContext.Provider>
  );
};

context-TodoStatus.jsx

import { useContext } from 'react'
import { TodoContext } from './TodoContext/TodoProvider'

export default function TodoStatus() {
  const { getTodoInfo } = useContext(TodoContext)

  return (
    <>
      <div>
        <span>All</span>:<span>{getTodoInfo().allTodos}</span>
      </div>
    </>
  )
}

props-App.jsx

import { useState } from 'react'
import TodoInput from './TodoProps/TodoInput'
import TodoList from './TodoProps/TodoList'
import StatusBar from './StatusBar'

function App() {
  const [todoItems, setTodoItems] = useState([])

  const addItem = (text) => {
    setTodoItems([...todoItems, { todo: text, done: false }])
  }
  
  const deleteTodo = (index) => { 
    setTodoItems(todoItems.filter((_, i) => i !== index))
  }

  return (
    <>
      <TodoInput addItem={addItem} />
      <TodoList data={todoItems} deleteItem={deleteTodo} />
      <StatusBar todoItems={todoItems} />
    </>
  )
}

export default App

props-StatusBar.jsx

import TodoStatus from './TodoStatus';

export default function StatusBar({ todoItems }) {
  return (
    <>
      <TodoStatus data={todoItems} />
    </>
  );
}

props-TodoInput.jsx

import { useState, createRef } from 'react';

export default function TodoInput({ addItem }) {
  const [todoText, setTodoText] = useState('');
  const ref = createRef();

  const updateTodo = (event) => {
    setTodoText(event.target.value);
  };

  const onAdd = () => {
    addItem(todoText);
    setTodoText('');
  }

  return (
    <div>
      <input type="text" ref={ref} value={todoText} onChange={updateTodo} />
      <button onClick={onAdd}>Add</button>
    </div>
  );
}

props-TodoList.jsx

export default function TodoList({ data, deleteItem }) {
  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>
          <input type="checkbox" />
          {item.todo}
          <button onClick={() => deleteItem(index)}>X</button>
        </li>
      ))}
    </ul>
  );
}

props-TodoStatus.jsx

export default function TodoStatus({ data }) {
  return (
    <>
      <div>
        <span>All</span>:<span>{data.length}</span>
      </div>
    </>
  )
}