Issue with ReactJS Keys - reactjs

Question

I have some JSX that is giving me the error:
Warning: Each child in a list should have a unique "key" prop
which I've run across before, but this time I can't see where the problem is. The markup is as follows:
return isLoading ? (
<div className="App">
<div className="spinner"></div>
<div className="App loading">
<p><i>loading...</i></p>
</div>
</div>
)
: hasError ? (
<div className="App loading-error">
⚠ There is a network issue: Please try again later
</div>
)
:
(
<div className="App" key={`op - ${Math.floor(Math.random() * 110)}`}>
<>
{shelves.map(s => {
return (
books[s].map((b,i) => {
return (
<>
<h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
<div key={`${s}-${i}`}>
<Link to={`/book/${b.id}`}>
<img src={b.imageLinks.thumbnail} alt={b.title}></img>
</Link>
<Select className="sel-x"
placeholder="Choose a bookshelf..."
value={""}
options={shelvesN}
onChange={opt => changeShelf(opt.value,b.id)}
/>
</div>
</>
)
})
)
})}
</>
</div>
)
I'd appreciate any help. Thanks.
k.

Answer 1

So, the way i see it, you are stuck here:
<div className="App" key={`op - ${Math.floor(Math.random() * 110)}`}>
<>
{shelves.map(s => {
return (
books[s].map((b,i) => {
return (
<>
<h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
<div key={`${s}-${i}`}>
<Link to={`/book/${b.id}`}>
<img src={b.imageLinks.thumbnail} alt={b.title}></img>
</Link>
<Select className="sel-x"
placeholder="Choose a bookshelf..."
value={""}
options={shelvesN}
onChange={opt => changeShelf(opt.value,b.id)}
/>
</div>
</>
)
})
)
})
this block contains 2 maps, which returns lists.
the inner one shouldn't use <>, because it needs the key reference, so should the first one. something like:
shelves.map((s, I) => {
return (
<div key={I}>
{books[s].map((b,i) => {
return (
<div key={`${I}-${i}`}>
<h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
<div >
<Link to={`/book/${b.id}`}>
<img src={b.imageLinks.thumbnail} alt={b.title}></img>
</Link>
<Select className="sel-x"
placeholder="Choose a bookshelf..."
value={""}
options={shelvesN}
onChange={opt => changeShelf(opt.value,b.id)}
/>
</div>
</div>
</>
)
})}
</div>)
}

Answer 2

You are returning React.Fragment from each array item, so assign the unique key to each Fragment, here:
books[s].map((b,i) => { return ( <> ..... </> )})
Use this code:
<div className="App" key={`op - ${Math.floor(Math.random() * 110)}`}>
<>
{shelves.map(s => {
return (
books[s].map((b,i) => {
return (
// ↓↓↓↓↓↓↓↓ add key here
<React.Fragment key={i}>
<h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
<div>
<Link to={`/book/${b.id}`}>
<img src={b.imageLinks.thumbnail} alt={b.title}></img>
</Link>
<Select className="sel-x"
placeholder="Choose a bookshelf..."
value={""}
options={shelvesN}
onChange={opt => changeShelf(opt.value,b.id)}
/>
</div>
</React.Fragment>
)
})
)
})}
</>
</div>

Answer 3

You use iteration, which means you must use keys. topic
Your code looks awful and unreadable, you should work better on the style.
shelves.map((s, I) => {
return (
<div key={I}>
{books[s].map((b,i) => {
return (
<div key={`${I}-${i}`}>
<h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
<div >
<Link to={`/book/${b.id}`}>
<img src={b.imageLinks.thumbnail} alt={b.title}></img>
</Link>
<Select className="sel-x"
placeholder="Choose a bookshelf..."
value={""}
options={shelvesN}
onChange={opt => changeShelf(opt.value,b.id)}
/>
</div>
</div>
</>
)
})}
</div>)
}