따봉 개별 카운트 관련 질문드립니다.

[윤성국]

안녕하세요, 선생님.

항상 좋은 강의 감사합니다.

 

input으로 새로운 게시글이 상단에 추가시,  

상위 3개따봉버튼에만 카운트가적용되고 밑으로 밀려난 따봉은 적용이 되지않아 NaN 값이 나오고있습니다.

 게시글 추가시 따봉 갯수를 기록할 수 있는 array의  항목도 같이 추가적으로 늘려야 할거같은데

 게시판에 이전 동일한 답변들이 있어 참고중인데,  쉽사리 이해가 가지않네요.. 

 가능하시다면, 게시글 추가시  따봉버튼 attay 늘리는 방법을 코드로 설명해주시면 감사하겠습니다  ㅠㅠ 

 

[현재코드]

function App() {

  let  [title, setTitle] = useState(["밥", "음료", "고기"]);      // 게시글명 

  let  [like, setlike] = useState([0,0,0]);                                    // 초기 따봉값 

 

  function newtitle(){                                                     // input 게시글추가 
     const titlesave = [...title];
     titlesave.unshift(input);
     setTitle(titlesave);}

 

       return ( 

       {title.map(function (a, i) {
              return (
                <div className="lists" key={i}> 

                     {a}                 

                     <span onClick={()=>{
                          const likecopy = [...like];
                          likecopy[i]++;
                          setlike(likecopy); }}>

                          ?{like[i]}

                       </span>

 

             <div>         // input박스 
              <input onChange={(e)=>{setInput(e.target.value)}}
              className='publish input' cplaceholder="타이틀"></input> 

              <button onClick={newtitle}>     // 저장버튼 
              className='publish button'>저장</button>
              </div>

 

[결과 _ unshift로 상단 리스트 추가시,  제일 하단 따봉클릭시 NaN출력]

            

 

 

 

 

 

 

  

[codingapple]

글 하나 발행시 like라는 state를 [0,0,0,0] 이렇게 만들면 됩니다

function newtitle(){       

여기 안에 

 

var newlike = [...like];

newlike.unshift(0);

setlike(newlike)

이런거 추가하면 되겠는데요

[윤성국]

답변주시는 시간동안, 말씀주신 코드를  newtitle 에 넣어두었는데 

unshift(0)  대신  unshift(like)   값을 넣어둔 상태였네요 ㅎㅎ .. 

 

빠르게 답변주셔서 감사합니다! 

 

 

 

[글쓴이]

글