Next.js Discord

Discord Forum

KEY PROM MISSING! WHERE?

Answered
Challangerson posted this in #help-forum
Open in Discord
ChallangersonOP
cell.js 
 return (
    <>
        <div className={style.cell} key={index + 10} onClick={getNickName}>
            <div className={style.cell_Image} key={index + 11}>
                <Image src={`https://minotar.net/cube/${member.nick}/48.png`} width={48} height={53} alt={"head_of_" + member.nick}/>
            </div>
            <div className={style.cell_top} key={index + 12}>
                <p key={index + 13}><span className={style.cellTop}>{index + 1}</span> <span className="nickname" ref={()=> { setNick(member.nick)}}>{member.nick}</span> <span className={style.rank}> {member.points}</span></p>
            </div>
        </div>
    </>
  )


page.js

<div className={style.top}>
            <h1>GRACZE</h1>

            {
              users.map((member, index) => {
                return (
                  <>
                    <Cell style={style} member={member} index={index} key={index + 25}/>
                  </>
                )
              })
            }

          </div>
Answered by Challangerson
but i wanna try to fix by myself
View full answer

13 Replies

ChallangersonOP
Rex
let's try cleaning up the code
1. remove fragments. I believe cell will automatically create unique div
2. Why are you adding 25 to the index for key?
3. Is index being used inside the cell component?
ChallangersonOP
@Rex what fragments
from the first point
Rex
<>
</>

I don't think you need them since there is only cell component present
Fulvous Whistling-Duck
The key should be in the outermost element inside a loop. That is in the page.js loop
ChallangersonOP
yes this makes this error
Fulvous Whistling-Duck
since you have a fragment (that you don't need because there is only a Cell element inside, you have two options: If you want to keep the fragment, use <Fragment key={}>...</Fragment> instead of #Unknown Channel</>. If not, remove #Unknown Channel</> and since Cell has a key, all should be ok.
ChallangersonOP
yeah to muches key
ChallangersonOP
but i wanna try to fix by myself
Answer
ChallangersonOP
and make it add everything an key
Fulvous Whistling-Duck
but that is not necessary
ChallangersonOP
that pluses is because "key need to be unique"