import React from 'react';

import {useState} from 'react';


function InputForm({number=null, name="", age=0, phonenumber=0, department="", addStu=f=>f}) {

const [txtNumber, setNumber] = useState(number);

const [txtName, setName] = useState(name);

const [txtAge, setAge] = useState(age);

const [txtPhonenumber, setPhonenumber] = useState(phonenumber);

const [txtDepartment, setDepartment] = useState(department);


const onSubmit = (event) => {

event.preventDefault();

addStu(txtNumber, txtName, txtAge, txtPhonenumber, txtDepartment);

}


return (

<div>

<form onSubmit={onSubmit}>

<input type="text" placeholder='학번(ex: 20221234)' onChange={(event)=>setAge(event.target.value)}></input>

<input type="text" placeholder='나이' onChange={(event)=>setName(event.target.value)}></input>

<input type="text" placeholder='이름' onChange={(event)=>setNumber(event.target.value)}></input>

<input type="text" placeholder='전화번호(010 뒤 4자리)' onChange={(event)=>setPhonenumber(event.target.value)}></input>

<input type="text" placeholder='학과(ex: 경영학과)' onChange={(event)=>setDepartment(event.target.value)}></input>

<input type="submit" value="추가"></input>

</form>

</div>

);

}


export default InputForm;


여기서 input 보면 plcaeholder가 학번이라고 적혀있는 곳에 setAge가 있고 나이에는 setName, 이름에는 setNumber 라고 되어있거든요.. 이게 setAge에는 나이, setName에는 이름, setNumber에는 학번이라고 적는게 맞는데 그대로 적고 입력하고 함수를 통해서 출력을 하는데.. 이름 적힌 곳에는 학번이 나오고 나이 적힌 곳에는 이름이 나오고 완전 개판이라서 저렇게 바꾼거거든요? 대체 왜 저렇게 되죠? 분명히 setAge라고 되어있는데 왜 저기에 나이를 적으면 학번이 나오고 개판이 되는 건가요? 잘못한게 없는데 대체 나한테 왜 이러는지 ㅠㅠㅠㅠ