#### 製作一個可手動新增資料及提供查詢的應用

- 需引用的 Hooks: useState、useRef。

import { useState, useRef } from "react";
import "./App.css";

// 透過輸入，儲存資料
// 透過搜尋，查詢儲存的資料

function App() {
  const [items, setItems] = useState([]);
  const [query, setQuery] = useState("");
  const inputRef = useRef(null);

  const filteredItems = items.filter((item) =>
    item.toLowerCase().includes(query.toLowerCase())
  );

  // 將 value add 到 items
  const addItem = () => {
    let value = inputRef.current.value;
    setItems((prev) => [...prev, value]);
  };

  return (
    <div className="App">
      <input
        type="text"
        placeholder="搜尋資料"
        onChange={(e) => setQuery(e.target.value)}
      />
      <input type="text" placeholder="新增資料" ref={inputRef} />
      <br />
      <button onClick={addItem}>新增資料</button>

      {/* 所有的資料，都會被這 map 給導出到 JSX 上 */}
      {filteredItems.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </div>
  );
}

export default App;

#### 延伸學習：

1. toLowerCase()

toLowerCase() 是字串方法之一，用於將字串轉換為小寫。
在這個代碼中，item.toLowerCase() 表示將 item 字串中的所有字符轉換為小寫。
這是為了確保比較時不區分大小寫，使搜尋是不區分大小寫的。

2. inCludes()

includes() 是字串方法之一，用於檢查一個字串是否包含另一個字串。
在這個代碼中，item.toLowerCase().includes(query.toLowerCase()) 
表示檢查轉換為小寫的 item 字串是否包含轉換為小寫的 query 字串。
這是進行不區分大小寫的字串包含性檢查。

- inCludes 方法，有針對 string & array 的差別：
在此範例是針對輸入後的 string 去做搜尋。