map() 관련 질문드립니다.

[dv.ra]

 리스트 부분 map 으로 반복문 만들고 그안에 따봉버튼 개별적으로 카운팅 되게

해보려는데 오류가 나서 질문드립니당.

 

 let [따봉, 따봉변경] = useState([0,0,0]); (근데 이렇게 하니깐 페이지에서 따봉옆에 000 이렇게 뜨더라고요)

 {
        글제목.map(function(a){
          return (
          <div className='list'>
            <h4>{ a } <span onClick={ ()=>{ 따봉.map(function(i){
              return i+1;
            })} }>👍</span> {따봉}</h4>
            <p>2월 18일 발행</p>
            <hr/>
          </div>
          )
        })
      }

 

이렇게 작성했는데 콘솔오류가 발생합니다. 콘솔오류는 이렇습니다.

Warning: Each child in a list should have a unique "key" prop.

Check the render method of App. See https://reactjs.org/link/warning-keys for more information.
at div
at App (http://localhost:3000/static/js/bundle.js:33:69)

 

key 값을 부여해야 되는거 같은데 어디에 어떤식으로 부여해야 될지 몰라서 질문드립니다.

[dv.ra]

이런식으로 key 값을 줘봤는데 따봉버튼 클릭시

아무 변화도 없고 콘솔에 오류도 안뜹니다~

{
        글제목.map(function(a){
          return (
          <div className='list' key={ a }>
            <h4>{ a } <span onClick={ ()=>{ 따봉.map(function(i){
              return i+1;
            })} }>👍</span> {따봉}</h4>
            <p>2월 18일 발행</p>
            <hr/>
          </div>
          )
        })
      }

[codingapple]

map으로 html 반복생성시 key={i} 추가하면 됩니다 

state변경시엔 state변경함수 써야합니다

0번버튼 누르면 따봉변경([1,0,0])

1번버튼 누르면 따봉변경([0,1,0])

이런 코드 실행하면 됩니다

 

[글쓴이]

글