2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
글쓴이글
-
2022년 12월 6일 05:50 #56954
박지오참가자질문 굵은 글씨로했습니다. 읽어주시면 감사하겠습니다. import { useState, useEffect } from "react"; import "./Home.css"; const Home = () => { const [todos, setTodos] = useState(["할일1", "할일2", "할일3", "할일4"]); const [post, setPost] = useState(""); const [postDelete, setPostDelete] = useState(false); const [writePopup, setWritePopup] = useState(false); const [editPopup, setEditPopup] = useState(false); const [editValue, setEditValue] = useState(todos[1].text); return ( <body> <div className="container"> <h1 className="header">Todo List</h1> <button className="todo-write" onClick={() => { setWritePopup(!writePopup); }} > 글쓰기 </button>{" "} {todos.map((a, i) => { 요기 map의 i를 다를 컴포넌트에도 전달하고싶습니다. return ( <main key={i}> <p>{todos[i]}</p> <button className="todo-delete" onClick={() => { if (window.confirm("정말 삭제합니까?")) { let copy = [...todos]; copy.splice(i, 0); setTodos(copy); alert("삭제되었습니다."); } else { alert("취소합니다."); } }} > 휴지통 </button> <button onClick={() => { setEditPopup(!editPopup); }} > 수정 </button> </main> ); })} {editPopup == true ? ( <TodoWEditPopup todos={todos} setEditPopup={setEditPopup} editPopup={editPopup} post={post} setTodos={setTodos} setPost={setPost} editValue={editValue} /> ) : null} {writePopup == true ? ( <TodoWritePopup setWritePopup={setWritePopup} writePopup={writePopup} post={post} setTodos={setTodos} todos={todos} setPost={setPost} /> ) : null} </div> </body> ); };const TodoWritePopup = (props) => { return ( <body> <div className="write-popup-background"> <div className="write-popup-head"> <h4>할일을 입력하세요.</h4> <button onClick={() => { props.setWritePopup(!props.writePopup); }} > X </button> </div> <input className="write-popup-input" type="text" onChange={(e) => { props.setPost(e.target.value); }} /> <button onClick={() => { if (window.confirm("작성하시겠습니까?")) { let copy = [...props.todos]; copy.unshift(props.post); props.setTodos(copy); alert("작성되었습니다."); } else { alert("취소합니다."); } }} > 글쓰기 </button> </div> </body> ); }; const TodoWEditPopup = (props) => { const [text, setText] = useState(props.todos[1]); 예를 들면 이런곳이요. props.todos[i]를 넣으면 에러가 나서 1로해놨습니다. 어떻게하면 가능할까요? i={i}이렇게 등록해도 안되네요.return ( <body> <div className="write-popup-background"> <div className="write-popup-head"> <h4>수정해주세요.</h4> <button onClick={() => { props.setEditPopup(!props.editPopup); }} > X </button> </div> <input className="write-popup-input" type="text" value={text} onChange={(e) => { console.log(e.target.value); setText(e.target.value); }} /> <button onClick={() => { let copy = [...props.todos]; copy.slice(1, 0, "할일없음"); props.setTodos(copy); }} > 수정하기 </button> </div> </body> ); }; export default Home; -
글쓴이글
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.