input 다루기 1 에서 key 질문입니다

[최솔]

{/* 반복문 1 -- 괄호 속에 JS 문법으로 작성 */}
{
content_title_b.map(function(a, i){

function heart_button(){
let heart_button_n = [...heart_button_b];
heart_button_n[i] ++;
heart_button_a(heart_button_n);
}

return(

<h4 onClick={ () => {clicked_button_a(i)}}> { a }
<button onClick={ heart_button }>?</button>
= {heart_button_b[i]}
</h4>
<p> content : blabla</p>
<p> date : 2020.12</p>

)
})
}

 

key 값은 div 안에서만 선언할 수 있나요 ?

저 코드에서는 어디에 넣어야 해요 ? 자꾸 오류떠용 ..

[codingapple]

key={}는 반복문 돌리는 요소 중 최상위 요소에 집어넣으면 됩니다.

코드가 중간에 짤린 것 같아서 코드를 다시 올려주십시오

[최솔]

return(
<li>
<h4 onClick={ () => {clicked_button_a(i)}}> { a }
<button onClick={ heart_button }>?</button>
= {heart_button_b[i]}
</h4>
<p> content : blabla</p>
<p> date : 2020.12</p>
</li>
)

 

li 랑 h4에 넣어봤는데 안돼용 !

[codingapple]

에러메세지는 뭐라고 뜨는지 복붙해주십시오 

[최솔]

Failed to compile.

./src/App.js
SyntaxError: /Users/solchoi/develop/react-project/project_blog/src/App.js: JSX attributes must only be assigned a non-empty expression (97:26)

 

이렇게요 !

[codingapple]

key={} 이렇게만 쓴게 아닐까요 key={i} 이렇게 반복문 돌 때마다 유니크한 숫자나 문자가 되는 변수 등을 집어넣어 사용하셔야합니다 

[최솔]

맞아요 죄송함당 ㅎ ㅎ ..

[글쓴이]

글