React 101 — Build a React project from scratch, Part Three

In my last article, I showed you how to update the basic structure of the blueprint React app, to add “ToDo”, “In Progress” and “Done” three columns using looping rendering:

src/App.js

import logo from './logo.svg';
import './App.css';

const todoList = [
  { title: 'Task-1', status: '24-06-22 18:15' },
  { title: 'Task-3', status: '24-06-22 18:15' },
  { title: 'Task-5', status: '24-07-22 18:15' },
  { title: 'Task-10', status: '24-07-22 18:15' }
];
const inprogressList = [
  { title: 'Task-4', status: '24-06-22 18:15' },
  { title: 'Task-11', status: '24-06-22 18:15' }
];
const doneList = [
  { title: 'Task-12', status: '24-07-22 18:15' },
  { title: 'Task-21', status: '24-07-22 18:15' }
];

  const KanbanCard = ({ title, status }) => {
  return (
    <li className="kanban-card">
      <div className="card-title">{title}</div>
      <div className="card-status">{status}</div>
    </li>
  );
};

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>My Kanban</h1>
        <img src={logo} className="App-logo" alt="logo" />
      </header>
      <main className="kanban-board">
        <section…