splice

src/Admin.js

@@ -3,18 +3,21 @@ import AdminQuiz from './AdminQuiz'
 import AdminSetting from './AdminSetting'
 
 let QuizBtn = []
+let QnAadmins = []
 
 function Admin() {
 
     const [result, setresult] = useState('')
     const [QuizBtnCount, setQuizBtnCount] = useState(4)
+    const [n, setn] = useState(0)
 
     function handleClickSetting() {
         setresult(<AdminSetting />)
     }
 
     function handleClickQuiz(e) {
-        (JSON.parse(localStorage.getItem('QnA')) === null) ? setresult(<AdminQuiz QuizNum={e.target.id} data={{Q:'x' , Choose:'x', A:'x'}} />) : setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />)
+        setn(e.target.id)
+        setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={QnAadmins} />)
     }
 
     function handleClickAddQuiz() {
@@ -24,6 +27,12 @@ function Admin() {
         setQuizBtnCount(QuizBtnCount + 1)
     }
 
+
+    function handleClickSave(QnAadmin){
+        QnAadmins.splice(n, 0, QnAadmin)
+        localStorage.setItem('QnA', JSON.stringify(QnAadmins))
+    }
+
     return (
         <>
             <div className="container-fluid">

src/AdminQuiz.js

-import React, { useState} from 'react';
+import React, { useState, useEffect} from 'react';
 
 let list = []
-
-let QnAadmins = []
 let QnAadmin = {}
 let savechoose = {}
 
@@ -18,15 +16,18 @@ function AdminQuiz(props) {
 
     // useEffect(()=>{
     //     setQuestion('')
-    //     if(props.data[props.QuizNum-1]){
+    //     if(JSON.parse(localStorage.getItem('QnA'))[props.QuizNum]){
     //         setq(props.data[props.QuizNum-1].Q)
     //         setc(props.data[props.QuizNum-1].Choose)
     //         seta(props.data[props.QuizNum-1].A)
+            
     //     }
     //     else {
     //         setq('보기를 입력하세요')
     //         setc(['보기를 입력하세요','보기를 입력하세요','보기를 입력하세요','보기를 입력하세요'])
     //         seta('보기를 입력하세요')
+            
+           
     //     }
     // },[props.QuizNum])
 
@@ -53,7 +54,7 @@ function AdminQuiz(props) {
                         <input type="radio" checked={false} name="answer" />
                     </div>
                 </div>
-                <input type="text" class="form-control" id={String(selectOption + 1)} placeholder={ props.data[props.QuizNum-1].Choose===null ? (selectOption+1)+'번 보기를 입력하세요' : props.data[props.QuizNum-1].Choose[selectOption]} onChange={handleChangeChoose} />
+                <input type="text" class="form-control" id={String(selectOption + 1)} placeholder={c[1]} onChange={handleChangeChoose} />
             </div>
         )
         setselectOption(selectOption + 1)
@@ -71,28 +72,24 @@ function AdminQuiz(props) {
             alert('정답이 입력되지 않았습니다.')
         }
         else {
-            // console.log(QnAadmin)
             QnAadmin['Choose'] = Object.values(savechoose)
             QnAadmin['N'] = String(props.QuizNum)
-            QnAadmins.push(QnAadmin)
+            props.fn(QnAadmin)
             QnAadmin = {}
-            localStorage.setItem('QnA', JSON.stringify(QnAadmins))
-            // console.log(QnAadmins)
             alert('입력이 완료되었습니다.')
         }
 
     }
 
-    // function handleChangeQuestion(){}
 
 
     return (
         <div className="" id="Quiz1">
-            <h2 className="p-3 border text-center">{String(props.QuizNum)}번 문제만들기</h2>
+            <h2 className="p-3 border text-center">{String(props.quizNum)}번 문제만들기</h2>
             <div className="p-3 borber">
                 <div className="p-3 ">
                     <span className="font-weight-bold mr-2 h3">1. 문제 입력하기</span>
-                    <input type="text" id="inputQuiz" className="form-control"  onChange={handleChangeQuestion} placeholder={ props.data[props.QuizNum-1].Q==='x' ? '문제를 입력하세요' : props.data[props.QuizNum-1].Q} />
+                    <input type="text" id="inputQuiz" className="form-control" value={question} onChange={handleChangeQuestion} placeholder={q} />
                 </div>
                 <div className="p-3 ">
                     <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
@@ -103,7 +100,7 @@ function AdminQuiz(props) {
                             <input type="radio" checked={false} name="answer" />
                             </div>
                         </div>
-                        <input type="text" className="form-control" id='1' placeholder={ props.data[props.QuizNum-1].Choose==='x' ? '1번 보기를 입력하세요' : props.data[props.QuizNum-1].Choose[0]} onChange={handleChangeChoose} />
+                        <input type="text" className="form-control" id='1'  placeholder={c[0]} onChange={handleChangeChoose} />
                     </div>
                     {list.map((element) => element)}
                     <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
@@ -112,7 +109,7 @@ function AdminQuiz(props) {
 
                 <div className="p-3 ">
                     <span className="font-weight-bold mr-2 h3">정답:</span>
-                    <input type="text" value={answer} onChange={handleChangeanswer} placeholder={ props.data[props.QuizNum-1].A==='x' ? '정답를 입력하세요' : props.data[props.QuizNum-1].A} />
+                    <input type="text" value={answer} onChange={handleChangeanswer} placeholder={a} />
                 </div>
 
                 <label for="inputLogin" className="d-flex justify-content-center">