Form으로 데이터 추가 및 삭제

function AddPetForm() {
  function handleSubmit(e) {
    e.preventDefault();
    alert("펫추가 클릭함!");
  }
  return (
    <form onSubmit={handleSubmit}>
      <fieldset>
        <legend>새 PET 을 추가하기</legend>
        <input placeholder="이름" />
        <input placeholder="종류" />
        <input placeholder="나이" />
        <button>펫 추가</button>
      </fieldset>
    </form>
  );
}

 

 

 

 

function AddPetForm(props) {
  const [name, setName] = useState("");
  const [species, setSpecies] = useState("");
  const [age, setAge] = useState("");
  console.log(name, species, age);

  function handleSubmit(e) {
    e.preventDefault();
    props.setPets((prev) =>
      prev.concat({ name: name, species: species, age: age, id: new Date() })
    );
    setName("");
    setSpecies("");
    setAge("");
  }
  return (
    <form onSubmit={handleSubmit}>
      <fieldset>
        <legend>새 PET 을 추가하기</legend>
        <input
          value={name}
          onChange={(e) => setName(e.target.value)} //입력이 바뀌면 현재 입력창의 값을 이름으로 업데이트한다.
          placeholder="이름"
        />
        <input
          value={species}
          onChange={(e) => setSpecies(e.target.value)}
          placeholder="종류"
        />
        <input
          value={age}
          onChange={(e) => setAge(e.target.value)}
          placeholder="나이"
        />
        <button>펫 추가</button>
      </fieldset>
    </form>
  );

첫 번째 name 은 key

두번째 name 은 value

 

테스트하기

 

 

 

삭제하기 

//화살표 함수로 바꿈
const Pet = (props) => {
  const handleDelete = () => {
    alert("삭제버튼클릭!");
  };

  return (
    <li>
      {props.name}은 {props.species}이고 {props.age}살 이다.
      <button onClick={handleDelete}>삭제</button>
    </li>
  );
};

 

 

pet 데이터 는 

 

 

 

 

 

 

//화살표 함수로 바꿈
const Pet = (props) => {
  const handleDelete = () => {
    props.setPets((prev) => prev.filter((pet) => pet.id !== props.id));
  };

  return (
    <li>
      {props.name}은 {props.species}이고 {props.age}살 이다.
      <button onClick={handleDelete}>삭제</button>
    </li>
  );
};

 

 

 

 

 

 

 

넘어온 props의 id와 filter함수를 통해서 반복되는 pet의 id랑 같지 않으면

통과 같으면 삭제