Part 1 input 다루기 2의 응용 3번 질문입니다.

[진의정]

게시물 발행 시 현재 날짜를 보여주는 기능을 구현하는데, 맞는거 같은데 글 발행시 날짜가 안보여요

제가 시도한건, 등록 버튼을 눌렀을때 날짜를 생성하고, dateObject를  통해서 객체로 만들어서 만들어둔 state인 date에 저장을 해둡니다.
 const currentDate = new Date();
 let dateObject = {currentDate};
 setDate([...date, dateObject]);
그럼 제 상상도로는 등록을 눌렀을때.. 현재 시간이 state에 저장되니깐,  이제 그것을 게시물에 찍히도록 합니다.. 그래서
Modal 컴포넌트? 에 <p>{date[selectedItem]}발행</p>를 입력하면. (selectedItem은 map의 index를 사용하기위해 저장한 state입니다.)
새로운 게시물을 발행 할 때마다 발행한 시간이 찍혀야 될것 같은데.. 안되네요.. 이해가 안가는 부분을 gpt 형한테 설명 부탁해도 제가 잘 못알아 먹겠어서 도움을 요청합니다.



import './App.css';
import { useState } from 'react';

function App() {

  let [title, setTitle] = useState(['남자 코트 추천','강남 우동맛집','파이썬 독학']);
  let [likeCount, likeUpdate] = useState([0,0,0]);
  let [modal, setModal] = useState(false);
  let [selectedItem, setSelectedItem] = useState(null);
  let [inputValue, setInputValue] = useState('');
  let [remove, setRemove] = useState('');
  let [date, setDate] = useState([]);
  return (
    <div className="App">
      {
        title.map(function(a, i){
          return (<div className="list" key={i}>
          <h4 onClick={()=>{ 
            setSelectedItem(i)
            setModal(!modal)
          }}>
            { title[i] }<span onClick = {(e)=>{
            e.stopPropagation(); 
            let copy = [...likeCount];
            copy[i] = copy[i] + 1
            likeUpdate(copy)}}>👍</span> {likeCount[i]}
          </h4>
          <p>발행</p>
          <button onClick={(e)=>{
            let copyTitle = [...title];
            copyTitle.splice(e, 1);
            setTitle(copyTitle);
          }}>삭제</button>
        </div>)
        })
      }
      <input onChange={(e)=>{
        setInputValue(e.target.value);
      }}></input>
      <button onClick={(e)=>{
        if(inputValue !== ''){
          const currentDate = new Date();
          let dateObject = {currentDate};
          setDate([...date, dateObject]);

          let copy = [...title];
          copy = [inputValue, ...copy];
          setTitle(copy);

          let countCopy = [...likeCount];
          countCopy = [0, ...countCopy];
          likeUpdate(countCopy);
        }
      }}>등록</button>
      {
        modal == true ? <Modal selectedItem={selectedItem} title={title} setTitle={setTitle}/> : null
      }

    </div>
  );
}

function Modal(props){
  const { selectedItem , title, date} = props;
  return (
      <div className="modal">
          <h4>{title[selectedItem]}</h4>
          <p>{date[selectedItem]}발행</p>
          <p>상세내용</p>
          <button>글수정</button>
      </div>
  )
}
export default App;

[codingapple]

date[0] 하면 object자료인거같은데 출력부터해봅시다

[글쓴이]

글