49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import React, { useState } from "react";
|
|
|
|
import CourseGoalList from "./components/CourseGoals/CourseGoalList/CourseGoalList";
|
|
import CourseInput from "./components/CourseGoals/CourseInput/CourseInput";
|
|
import "./App.css";
|
|
|
|
const App = () => {
|
|
const [courseGoals, setCourseGoals] = useState([
|
|
{ text: "Do all exercises!", id: "g1" },
|
|
{ text: "Finish the course!", id: "g2" },
|
|
]);
|
|
|
|
const addGoalHandler = (enteredText) => {
|
|
setCourseGoals((prevGoals) => {
|
|
const updatedGoals = [...prevGoals];
|
|
updatedGoals.unshift({ text: enteredText, id: "goal1" });
|
|
return updatedGoals;
|
|
});
|
|
};
|
|
|
|
const deleteItemHandler = (goalId) => {
|
|
setCourseGoals((prevGoals) => {
|
|
const updatedGoals = prevGoals.filter((goal) => goal.id !== goalId);
|
|
return updatedGoals;
|
|
});
|
|
};
|
|
|
|
let content = (
|
|
<p style={{ textAlign: "center" }}>No goals found. Maybe add one?</p>
|
|
);
|
|
|
|
if (courseGoals.length > 0) {
|
|
content = (
|
|
<CourseGoalList items={courseGoals} onDeleteItem={deleteItemHandler} />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<section id="goal-form">
|
|
<CourseInput onAddGoal={addGoalHandler} />
|
|
</section>
|
|
<section id="goals">{content}</section>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|