前回は、Firestore Databese のデータベースをリアルタイムで取得しました。

今回は、ブラウザで送信したデータを、Firestore Databese に保存します。

まずは、Books のデータをuseStateで状態管理します。

const [title, setTitle] = useState("")
const [author, setAuthor] = useState("")
const [category, setCategory] = useState("")
const [isRead, setIsRead] = useState(false)
const [createdAt, setCreatedAt] = useState(new Date())

簡単なフォームを作成しましょう。

return (
  <form onSubmit={handleSubmit}>
    <div className="column">
      <label>
        タイトル:
        <input
          type="text"
          required
          value={title}
          onChange={e => setTitle(e.target.value)}
        />
      </label>
      <label>
        著者:
        <input
          type="text"
          required
          value={author}
          onChange={e => setAuthor(e.target.value)}
        />
      </label>
      <label>
        カテゴリ:
        <input
          type="text"
          required
          value={category}
          onChange={e => setCategory(e.target.value)}
        />
      </label>
      <label>
        読了:
        <select
          type="select"
          required
          value={isRead}
          onChange={e => setIsRead(e.target.value)}
        >
          <option value={false}>未</option>
          <option value={true}>済</option>
        </select>
      </label>
      <labal>
        作成日:
        <input
          type="date"
          value={createdAt}
          onChange={e => setCreatedAt(e.target.value)}
        />
      </labal>
    </div>
    <button type="submit">送信</button>
  </form>
)

handleSubmit関数に、値が行き渡るようにします。

また、e.preventDefault()で、 余計な JavaScript の実行をしないようにします。

const handleSubmit = async e => {
  e.preventDefault()

  console.log(title, author, category, isRead, createdAt)
}

試しに、ブラウザでデータを送信してみます。

image2

Console を確認すると、

image3

フォームの内容を取得することができています。

firebaseConfig から firebaseApp をインポートします。

import { firebaseApp } from "../firebase/firebaseConfig"

firebaseApp の firestore を使用します。

const firestore = firebaseApp.firestore

try/catch で送信後のデータ処理をしましょう。

const handleSubmit = async e => {
  e.preventDefault()

  const firestore = firebaseApp.firestore

  try {
  } catch (e) {
    console.log(e)
  }
}

Firebase Database の送信先を指定するために、firebase/firestore のcollectionを使用します。

Firebase Database の送信先は、Books を指定します。

const handleSubmit = async e => {
  e.preventDefault()

  const firestore = firebaseApp.firestore

  try {
    const docRef = collection(firestore, "Books")
  } catch (e) {
    console.log(e)
  }
}

データを送信するには、firebase/firestore のaddDocを使用します。

第一引数には、先程作成したdocRef、第二引数には、渡したいデータを指定します。

const handleSubmit = async e => {
  e.preventDefault()

  const firestore = firebaseApp.firestore

  try {
    const docRef = collection(firestore, "Books")

    await addDoc(docRef, { title, author, category, isRead, createdAt })
  } catch (e) {
    console.log(e)
  }
}

一通り完成したので、再度ブラウザでデータを送信してみます。

image4

Firebase Database を確認すると、

image5

送信したデータが保存されていました。

次回は、ブラウザで Firestore Databese のデータを削除します。

ブログ一覧