UseStateでinputの入力が空の時にエラーメッセージが画面に表示されない

UseStateでinputの入力が空の時にエラーメッセージが画面に表示されなかった問題について

この記事を書こうと考えた背景について

• アプリの実行画面でエラーメッセージが表示されていなくて原因に気づくまでに時間がかかったため。

問題の原因

画面にStateのerrorを表示させていなかった。

問題のファイル

App.jsx

export const App = () =>{

const [inputs, setInputs] = useState({ content: "", time:""});

const [records, setReCords] = useState([]);
 const [error, setError] = useState("");

const handleChange = (e) => {
  const {name, value } = e.target;
  if (name === 'time' && !/^[0-9]*$/.test(value)) {
    return;
}

  setInputs(prevInputs =>({
    ...prevInputs,
    [name]:value
}));
}

  const handleRegister = () =>{
    if(!inputs.content ||!inputs.time){
      setError("入力されていない項目があります。");
    }
    else{
      setReCords(prevReCords =>[
        ...prevReCords,
        {title: inputs.content, time: `${inputs.time}時間`}
    ]);
    setInputs({content:"", time:""});
    setError("");
  }
  };
  return (
    <>
    <InputForm name="content" value={inputs.content} onChange={handleChange} label="学習内容"/>
    <InputForm name="time" value={inputs.time} onChange={handleChange} label="学習時間" suffix="時間" pattern="^[0-9]*$"/>
    <p>入力されている学習内容: {inputs.content}</p>
    <p>入力されている時間: {inputs.time}時間</p>
    <Insert onClick={handleRegister}/>
    <ListDisplay recordList={records}/>
    </>
  );
}

原因調査

console.logを出力してhandleRegister関数の中にあるif文に入っているかを確認した。

App.jsx

const handleRegister = () =>{
    if(!inputs.content ||!inputs.time){
      setError("入力されていない項目があります。");
      console.log("入力されていない項目があります。")
    }
    else{
      setReCords(prevReCords =>[
        ...prevReCords,
        {title: inputs.content, time: `${inputs.time}時間`}
    ]);
    setInputs({content:"", time:""});
    setError("");
  }
  };

実行結果

画面にエラーメッセージが表示された際のコード

App.jsx

export const App = () =>{

const [inputs, setInputs] = useState({ content: "", time:""});

const [records, setReCords] = useState([]);
 const [error, setError] = useState("");

const handleChange = (e) => {
  const {name, value } = e.target;
  if (name === 'time' && !/^[0-9]*$/.test(value)) {
    return;
}

  setInputs(prevInputs =>({
    ...prevInputs,
    [name]:value
}));
}

  const handleRegister = () =>{
    if(!inputs.content ||!inputs.time){
      setError("入力されていない項目があります。");
    }
    else{
      setReCords(prevReCords =>[
        ...prevReCords,
        {title: inputs.content, time: `${inputs.time}時間`}
    ]);
    setInputs({content:"", time:""});
    setError("");
  }
  };
  return (
    <>
    <InputForm name="content" value={inputs.content} onChange={handleChange} label="学習内容"/>
    <InputForm name="time" value={inputs.time} onChange={handleChange} label="学習時間" suffix="時間" pattern="^[0-9]*$"/>
    <p>入力されている学習内容: {inputs.content}</p>
    <p>入力されている時間: {inputs.time}時間</p>
    <Insert onClick={handleRegister}/>
    <div>{error}</div>
    <ListDisplay recordList={records}/>
    </>
  );
}

解決したときの実行結果

まとめ　

エラーに嵌ったときにはconsole.logでif文の条件分岐に入っているか等を確認することや基礎的な文法・画面表示の方法等が正しく書けているかを確認することが大切であると感じた。