Reactでバリデーションを実装したい

Question

input要素の下にエラー文を追加したいです。

以下の画像は例です。

実装したい機能

• 送信ボタンを押した時に、firebaseに登録するアドレスが無効の場合（@~ではないもの）にエラー表示が出る
• 未入力の場合もエラーを表示したい

現在のコード

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import firebase from '../config/firebase'
import styled from 'styled-components'



const SignUp = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault()
    //送信した後form内を空にする↓↓↓
    if (email) {
      setEmail('');
    }

    firebase.auth().createUserWithEmailAndPassword(email, password)
      .catch(err => {
        if (err) {
          console.log(err)
        }
      })
  }
  return (
    <>
      <MySignUp>SignUp</MySignUp>
      <SignUpForm onSubmit={handleSubmit}>
        <div>
          <label htmlFor="name">Name: </label>
          <input
            type="text"
            value={name}
            id="name"
            onChange={e => setName(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="email">Email: </label>
          <input
            type="text"
            value={email}
            id="email"
            onChange={e => setEmail(e.target.value)}
          />
          <p>正しいメールアドレスを入力して下さい</p>
        </div>

        <div>
          <label htmlFor="password">Password: </label>
          <input
            type="text"
            value={password}
            name=""
            id="password"
            onChange={e => setPassword(e.target.value)}
          />
        </div>

        <button
          type="submit"
          //form内を空にする↓↓↓
          onClick={() => { setEmail('') }}
        >SignUp</button>
      </SignUpForm>

      <MyLink>
        <Link to="/login">Login</Link>
      </MyLink>

    </>
  )
}

<p>タグにclassNameをつけて、要素を取得しclassList.removeをデフォルトの状態に設定し、firebaseでエラーの場合にadd()で追加なども行ってみましたが上手くいきませんでした。 現時点のコードで、どのような実装をすればシンプルに出来るか、お時間のある方ご教授して頂きたいです

Answer 1

classNameを変更してもReact Componentが再レンダリングされずエラー文が表示されないのでは、と思いました。

エラー文のpタグをstateで管理するのはどうでしょうか。

...

+ const [isError, setIsError] = React.useState(false);

...


    firebase.auth().createUserWithEmailAndPassword(email, password)
      .catch(err => {
        if (err) {
          console.log(err)
+         setIsError(true)
        }
      })

...

-   <p>正しいメールアドレスを入力して下さい</p>
+   {isError && <p>正しいメールアドレスを入力して下さい</p>}

...

Comments

[pikari]

解決致しました！
アドバイスありがとうございます！

[nabehide]

解決して良かったです！