State x Object

Author: potchangelo

src/App.js

@@ -1,10 +1,42 @@
+import { useState } from 'react';
 import './App.css';
 
 function App() {
+ const [note, setNote] = useState({
+ content: '', author: ''
+ });
+
+ function onNoteValueChange(event) {
+ setNote((prevNote) => {
+ return {
+ ...prevNote,
+ [event.target.name]: event.target.value
+ };
+ });
+ }
+
  return (
  <section className="app-section">
  <div className="app-container">
  <h3>สักหน่อยมั้ยหละ</h3>
+ <p>
+ <textarea
+ rows="3"
+ placeholder="บันทึกความในใจ"
+ name="content"
+ value={note.content}
+ onChange={onNoteValueChange}
+ />
+ </p>
+ <p>
+ <input
+ type="text"
+ placeholder="ลงชื่อ"
+ name="author"
+ value={note.author}
+ onChange={onNoteValueChange}
+ />
+ </p>
  </div>
  </section>
  );

src/index.css

@@ -11,3 +11,15 @@ code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  monospace;
 }
+
+input[type="text"], 
+textarea {
+ border: 1px solid gray;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ font-size: 16px;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 8px;
+}