따봉 개별적으로 올리는거 질문입니다.

[이정미]

안녕하세요 따봉 개별적으로 업데이트 시도해 봤는데요 에러가 나요 ㅠㅠ
게시판에 있는 따봉 관련된 모든글 읽어 보면서 했는데 이해가 안되요 아래에 제가 짠 코드 첨부 합니다.
문제가 어떤거지 알려주세요 감사합니다 

/* eslint-disable */
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집','파이썬 독학']);
let [블로그글제목, 블로그글제목변경] = useState(['이정미 블로그', '마마 블로그', '동생 블로그']);
let [따봉, 따봉변경] = useState(0,0,0);

let [modal, modal변경] = useState(false);

var array = [2,3,4];
var newArray = array.map(function(a){
return a * 2
});
console.log(newArray);

let posts = '강남 고기 맛집';

// 첫번째 방법은 글제목 변경 함수의 내용을 변경해줘서 할수 있다.
// function 제목바꾸기(){
// 글제목변경(['여자 코트 추천', '강남 우동 맛집']);
// }

// 두번째 방법
function 제목바꾸기(){
var newArray = [...글제목];
newArray[0] = '여자코트 추천';
글제목변경(newArray);
}

function 가나다정렬(){
var newArray = [...블로그글제목];
newArray = newArray.sort();
블로그글제목변경(newArray);
}

return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<button onClick={ 제목바꾸기 } >버튼</button>
<div className="list">
<h3> {글제목[0]} <span onClick={()=>{따봉변경(따봉+1)}}>?</span> {따봉} </h3>
<p> 2월 17일 발행 </p>
<hr/>
</div>
<button onClick={ 가나다정렬 }>Button</button>
<div className="list">
<h3> {블로그글제목[0]} </h3>
<p> 2월 17일 발행 </p>
<hr/>
</div>
<div className="list">
<h3> {블로그글제목[1]} </h3>
<p> 2월 17일 발행 </p>
<hr/>
</div>
<div className="list">
<h3> {블로그글제목[2]} </h3>
<p> 2월 17일 발행 </p>
<hr/>
</div>
<button onClick={()=>{modal변경(!modal)}}>버튼</button>
 
{
modal === true
? <Modal></Modal>
: null
}
 
{
블로그글제목.map(function(a){
return (
<div className="list">
<h3> {a} <span onClick={()=>{따봉변경(따봉+1)}}>?</span> {따봉} </h3>
<p> 2월 17일 발행 </p>
<hr/>
</div>
)
})
}
 
{
글제목.map(function(a,i){
return(
<div>
<div className="list">
<h3>{글제목[0]}
<span onClick={()=>{ let copy=[...따봉]; copy[0]++; 따봉변경(copy)}}>?</span>
{따봉[0]}
</h3>
<p>2월 17일 발행</p>
<hr/>
</div>

<div className="list">
<h3>{글제목[1]}
<span onClick={()=>{ let copy=[...따봉]; copy[1]++; 따봉변경(copy)}}>?</span>
{따봉[1]}
</h3>
<p>2월 17일 발행</p>
<hr/>
</div>

<div className="list">
<h3>{글제목[2]}
<span onClick={()=>{ let copy=[...따봉]; copy[2]++; 따봉변경(copy)}}>?</span>
{따봉[2]}
</h3>
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
)
})
}
</div>
);
}

function Modal(){
return(
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}

[codingapple]

어떤에러가 납니까 

블로그글제목말고 글제목이라는 데이터는 따봉기능잘될 것 같은데요

[이정미]

답변 감사드립니다. 블로그 글 제목은 제가 강의 보면서 따로 연습한거구요.
Line 90번 부터 글제목 데이터가 에러가 납니다. 따봉을 누르면
TypeError: 따봉 is not inerable 이라고 메세지가 나와요 선생님  

[codingapple]

일단 state 만들 때

let [따봉, 따봉변경] = useState(0,0,0); 

이거를 array로 만들고 싶으시면 useState([0,0,0]); 이렇게쓰셔야하고

에러나는 줄은 아마 따봉변경(따봉+1) 이거같은데

따봉이라는건 숫자가아니라 array라서 +1하고 그럴 수가 없어서 그렇습니다

 

[글쓴이]

글