【React】formを使ってDBにデータを登録する処理

例

firestoreを例に利用。
使いたいDBに合わせて登録処理を実装する。
実際動かすとhtmlタグ関連で少しエラー出るかも。

export default function Home() {
    // stateを宣言
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    // firestore関数用編集を初期化
    const db = getFirestore(app); 

    // onClickでDBへデータ登録する用のアロー関数を定義
    const addTaskToTodos = async () => {

        // フロントエンドで未入力のバリデーションをする
        if (title === ""){
            window.alert('タイトルが未入力です')
            return
        };
        if (content === "" ){
            window.alert('内容が未入力です')
            return
        };

        // firestoreへデータを保存する処理
        await addDoc(collection(db, "todos"), {
            title: title,
            content: content
        }, {merge: true});

        // 保存時のメッセージ
        window.alert(`以下のタスクを登録しました。\n\nタイトル：${title}\n内容：${content}`);

        // stateを初期化
        setTitle('');
        setContent('');
    }

    // onChangeでformの入力値をstateに格納する処理用のアロー関数
    const getInputTextForTitle = (event) => setTitle(event.target.value);
    const getInputTextForContent = (event) => setContent(event.target.value);

    return (
        <>
            <input
                placeholder="タイトル"
                margin="normal"
                value={title}
                onChange={getInputTextForTitle}
            />
            <input
                placeholder="内容"
                margin="normal"
                fullWidth
                value={content}
                onChange={getInputTextForContent}
            />
            <button
                variant="contained"
                color="primary"
                type="submit"
                margin="normal"
                onClick={addTaskToTodos}
            >追加</button>
        </>
    )
}