49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import { useState } from "react";
|
|
import Note from "./components/Note";
|
|
|
|
const App = ({ startingNotes }) => {
|
|
const [notes, setNotes] = useState(startingNotes);
|
|
const [newNote, setNewNote] = useState("a new note...");
|
|
const [showAll, setShowAll] = useState(true);
|
|
|
|
const addNote = (event) => {
|
|
event.preventDefault();
|
|
const newNoteObject = {
|
|
content: newNote,
|
|
important: Math.random() < 0.5,
|
|
id: String(notes.length + 1),
|
|
};
|
|
|
|
setNotes(notes.concat(newNoteObject));
|
|
setNewNote("");
|
|
};
|
|
|
|
const handleNoteChange = (event) => {
|
|
console.log(event.target.value);
|
|
setNewNote(event.target.value);
|
|
};
|
|
|
|
const notesToShow = showAll
|
|
? notes
|
|
: notes.filter((note) => note.important === true);
|
|
|
|
return (
|
|
<div>
|
|
<h1>Notes</h1>
|
|
<div>
|
|
{" "}
|
|
<button onClick={() => setShowAll(!showAll)}>
|
|
{" "}
|
|
show {showAll ? "important" : "all"}{" "}
|
|
</button>{" "}
|
|
</div>
|
|
<ul>{notesToShow.map((note) => Note({ note }))}</ul>
|
|
<form onSubmit={addNote}>
|
|
<input value={newNote} onChange={handleNoteChange} />
|
|
<button type="submit">save</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|