107. 오류 State 관리하기

모달 창을 띄우는 유무를 결정하기 위해서 state를 이용할 것이다

여기서 변수에 + 를 붙이는 것은 Number 형태로 변환하기 위함이다

 

에러마다 메세지를 다르게 했고 모달창에서 background 클릭시 모달 창의 에러 상태를 변경 시켜 사라지게 했다

 

UserForm.js

import "./UserForm.css";
import { useState } from 'react';
import Card from './UI/Card';
import Button from "./UI/Button";
import ErrorModal from "./UI/ErrorModal";

const UserForm = (props) => {

  const [userName, setUserName] = useState("");
  const [userAge, setUserAge] = useState(0);
  const [userInfo, setUserInfo] = useState([]);
  const [error, setError] = useState();

  const usenameChangeHandler = (event) => {
    setUserName(event.target.value);
  }

  const useageChangeHandler = (event) => {
    setUserAge(Number(event.target.value));
  }

  const addUserInfoHandler = (event) => {
    event.preventDefault();
    if (userName.trim().length === 0 || userAge.length === 0) {
      setError({
        title: 'Invalid input',
        message: 'Please enter a valid name and age (non-empty values).'
      });
      return;
    }
    if (userAge < 1) {
      setError({
        title: 'Invalid input',
        message: 'Please enter a valid age (> 0).'
      });
      return;
    }
    const userInfo = {
      'userName': userName,
      'userAge': userAge,
      'userId': Math.round(Math.random() * 1000000)
    }
    props.onSaveUserInfo(userInfo);

    setUserName("");
    setUserAge("");

  }

  const errorHandler = () => {
    setError(null);
  }

  return (
    <div>
      {error && <ErrorModal title={error.title} message={error.message} onConfirm={errorHandler} />}
      <Card className="userform__container">
        <form className="userform__inner" onSubmit={addUserInfoHandler}>
          <div className="userform__box">
            <label>Username</label>
            <input type="text" value={userName} onChange={usenameChangeHandler} />
          </div>
          <div className="userform__box">
            <label>Age (Years)</label>
            <input type="number" value={userAge} onChange={useageChangeHandler} />
          </div>
          <Button type="submit">Add User</Button>
        </form>
      </Card >
    </div>
  );
}
export default UserForm;