import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
function App() {
let [num, setNum] = useState([]);
let [numplus, setNumplus] = useState(0)
let [title, setTitle] = useState([])
let [intitle, setIntitle] = useState("")
let [writer, setWriter] = useState([])
let [inwriter, setInwriter] = useState("")
let [data, setData] = useState([])
let [indata, setIndata] = useState("")
let [modalbt, setModalbt] = useState(false)
return (
<div className="App" >
<h2 style={{color:"green"}}>A/S 게시판</h2>
<h3>고객만족에서 고객감동으로! 다 쏘에게 맡겨주세요</h3>
<table className="a">
<tr>
<th >번호</th>
<th >제목</th>
<th >작성자</th>
<th >작성일</th>
<th >진행현황</th>
</tr>
{
num.map(function(a,i){
return(
<tr>
<td >{num[i]}</td>
<td >{title[i]}</td>
<td >{writer[i]}</td>
<td >{data[i]}</td>
<td ><button>삭제</button></td>
</tr>
)
})
}
</table>
<button className='bt' onClick={()=>{
setModalbt(!modalbt)
}}>글쓰기</button>
{
modalbt === true ? <Modal num={num} numplus={numplus} title={title} intitle={intitle} writer={writer} inwriter={inwriter} data={data} indata={indata}></Modal> : null
}
</div>
)
}
function Modal(props){
return(
<div>
<h2>글쓰기</h2>
<p>제목</p>
<input onChange={(e)=>{props.setIntitle(e.target.value)}}></input>
<p>작성자</p>
<input onChange={(e)=>{props.setInwriter(e.target.value)}}></input>
<p>날짜</p>
<input onChange={(e)=>{props.setIndata(e.target.value)}}></input>
<br/>
<button onClick={()=>{
props.setNumplus(props.numplus+1)
props.num.push(props.numplus)
let copy = [...props.title]
copy.push(props.intitle)
props.setTitle(copy)
let copy1 = [...props.writer]
copy1.push(props.inwriter)
props.setWriter(copy1)
let copy2 = [...props.data]
copy2.push(props.indata)
props.setData(copy2)
}}>저장</button>
</div>
)
}
export default App;
에서 modal 컴포넌트에서 값을 입력해서 저장 버튼을 누르면 table에 값이 나오게 하려고 하는데
modal 컴포넌트에서 button 태그 안의 props 문법이 잘못된거 같은데 어떤게 잘못 된지를 모르게서요 ㅠㅠ
modal 안에 button에서 console 찍으면 나오긴 하는데 modal 값이 전송이 안되요 ㅠ
