npx create-react-app reminders-app

cd reminders-app

npm start

import React from 'react';

const Reminder = ({ reminder, index, completeReminder, removeReminder }) => {
  return (
    <div className="reminder">
      <span style={{ textDecoration: reminder.isCompleted ? "line-through" : "" }}>{reminder.text}</span>
      <div>
        <button onClick={() => completeReminder(index)}>Complete</button>
        <button onClick={() => removeReminder(index)}>x</button>
      </div>
    </div>
  );
}

export default Reminder;

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

function App() {
  const [reminders, setReminders] = useState([
    { text: "Buy groceries", isCompleted: false },
    { text: "Attend meeting at 5 PM", isCompleted: false },
    { text: "Dentist appointment", isCompleted: false }
  ]);

  const addReminder = text => {
    const newReminders = [...reminders, { text }];
    setReminders(newReminders);
  };

  const completeReminder = index => {
    const newReminders = [...reminders];
    newReminders[index].isCompleted = true;
    setReminders(newReminders);
  };

  const removeReminder = index => {
    const newReminders = [...reminders];
    newReminders.splice(index, 1);
    setReminders(newReminders);
  };

  return (
    <div className="app">
      <div className="reminder-list">
        {reminders.map((reminder, index) => (
          <Reminder
            key={index}
            index={index}
            reminder={reminder}
            completeReminder={completeReminder}
            removeReminder={removeReminder}
          />
        ))}
        <ReminderForm addReminder={addReminder} />
      </div>
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function ReminderForm({ addReminder }) {
  const [value, setValue] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    if (!value) return;
    addReminder(value);
    setValue("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="input"
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </form>
  );
}

export default ReminderForm;

.app {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.reminder-list {
width: 300px;
}

.reminder {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
margin-bottom: 10px;
padding: 10px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.input {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
margin-bottom: 10px;
box-sizing: border-box;
}

import './App.css';