so i wanted to render array but it keeps on saying , Warning: Each child in a list should have a unique "key" prop even tho it has unique key, my array contains three elements and it does not even render the third array properly, the button doesnt even work of third li for some reason.
import React, { useEffect, useRef } from "react";
import fire from "./firebase";
import firebase from "firebase"
import { useState } from "react"
import Header from "./header"
import Nav from "./nav"
import { NavLink, Redirect } from "react-router-dom";
import AudioPlayer from "./audioplayer"
const Music = ({ match }) => {
const audioRef = useRef();
const audioPlayer = audioRef.current
const [audioSrc, setAudioSrc] = useState()
const [musics, setMusics] = useState([])
const [user, setUser] = useState(null)
const [pfp, setPfp] = useState(null)
const [audioTitle, setAudioTitle] = useState(null)
const { params: { uID } } = match;
var userName;
var tracksTitle = [];
useEffect(()=>{
firebase.database().ref("users/"+uID+"/praivate/login credentials").on("value", (snapshot)=>{
setUser(snapshot.val().userName)
setUser(snapshot.val().userName)
})
firebase.database().ref("users/"+uID+"/public/profile/pic").on("value", (snapshot)=>{
console.log(snapshot.val().pfpUrl)
setPfp(snapshot.val().pfpUrl)
})
}, [])
var music;
//maybe the problem is over here somewhere
useEffect(()=>{
firebase.database().ref("users/"+uID+"/public/songs/").on("value", (snapshot)=>{
//stores data in music.
music = snapshot.val()
//gets all title of the data
Object.values(music).forEach((value)=>{
tracksTitle.push(value.title)//pushes titles to tracksTitle
})
setMusics(tracksTitle) //stores all track title in musics
})
}, [uID])
const [progVal, setProgVal] = useState("0%")
function update(event){
let duration = (event.target.currentTime/event.target.duration)*100
setProgVal(duration)
}
function play(event){
const value = event.target.getAttribute("value")
console.log(value)
if(value){
firebase.database().ref("public/songs/"+value).on("value", (snapshot)=>{
setAudioSrc(snapshot.val().aduioURL)
})
}
setAudioTitle(value)
audioPlayer.play()
}
function playAudio(){
audioPlayer.play()
}
function stop(event){
audioPlayer.pause()
}
return(
<>
<Nav />
<div id = "profile" className = "main">
<audio id = "player" ref = {audioRef} src = {audioSrc} name = "audioplayer" onTimeUpdate = {update}>
</audio>
<div class = "profile-container">
<div className = "cover-pic">
<img src = "" />
<div className = "pfp">
<img src = {pfp} height = "100" width = "100"/>
</div>
<div className = "User-Name">
<h1>{user}</h1>
</div>
</div>
<div class = "tabsContainer">
<div class = "tabs-holder">
<NavLink to = {"/u/"+uID+"/music"}><button><span>Music</span></button></NavLink>
<button><span>Playlist</span></button>
<button><span>About</span></button>
</div>
</div>
</div>
<div class = "music-content-container">
<div class = "music-box">
<div class = "user-musics">
<ul>
{musics && musics.map((name, i)=>{
console.log()
return(
<>
//it does not render the third array properly
<li key = {i}><button onClick = {play} value = {name}>Play</button>{name}</li>
</>
)
})}
</ul>
</div>
</div>
</div>
</div>
<AudioPlayer progVal = {progVal} stop = {stop} playAudio = {playAudio}/>
<Header />
</>
)
}
export default Music
//so i wanted to render array but it keeps on saying , Warning: Each child in a list should have a unique "key" prop even tho it has unique key, my array contains three elements and it does not even render the third array properly, the button doesnt even work of third li for some reason.
import React, { useEffect, useRef } from "react";
import fire from "./firebase";
import firebase from "firebase"
import { useState } from "react"
import Header from "./header"
import Nav from "./nav"
import { NavLink, Redirect } from "react-router-dom";
import AudioPlayer from "./audioplayer"
const Music = ({ match }) => {
const audioRef = useRef();
const audioPlayer = audioRef.current
const [audioSrc, setAudioSrc] = useState()
const [musics, setMusics] = useState([])
const [user, setUser] = useState(null)
const [pfp, setPfp] = useState(null)
const [audioTitle, setAudioTitle] = useState(null)
const { params: { uID } } = match;
var userName;
var tracksTitle = [];
useEffect(()=>{
firebase.database().ref("users/"+uID+"/praivate/login credentials").on("value", (snapshot)=>{
setUser(snapshot.val().userName)
setUser(snapshot.val().userName)
})
firebase.database().ref("users/"+uID+"/public/profile/pic").on("value", (snapshot)=>{
console.log(snapshot.val().pfpUrl)
setPfp(snapshot.val().pfpUrl)
})
}, [])
var music;
//maybe the problem is over here somewhere
useEffect(()=>{
firebase.database().ref("users/"+uID+"/public/songs/").on("value", (snapshot)=>{
//stores data in music.
music = snapshot.val()
//gets all title of the data
Object.values(music).forEach((value)=>{
tracksTitle.push(value.title)//pushes titles to tracksTitle
})
setMusics(tracksTitle) //stores all track title in musics
})
}, [uID])
const [progVal, setProgVal] = useState("0%")
function update(event){
let duration = (event.target.currentTime/event.target.duration)*100
setProgVal(duration)
}
function play(event){
const value = event.target.getAttribute("value")
console.log(value)
if(value){
firebase.database().ref("public/songs/"+value).on("value", (snapshot)=>{
setAudioSrc(snapshot.val().aduioURL)
})
}
setAudioTitle(value)
audioPlayer.play()
}
function playAudio(){
audioPlayer.play()
}
function stop(event){
audioPlayer.pause()
}
return(
<>
<Nav />
<div id = "profile" className = "main">
<audio id = "player" ref = {audioRef} src = {audioSrc} name = "audioplayer" onTimeUpdate = {update}>
</audio>
<div class = "profile-container">
<div className = "cover-pic">
<img src = "" />
<div className = "pfp">
<img src = {pfp} height = "100" width = "100"/>
</div>
<div className = "User-Name">
<h1>{user}</h1>
</div>
</div>
<div class = "tabsContainer">
<div class = "tabs-holder">
<NavLink to = {"/u/"+uID+"/music"}><button><span>Music</span></button></NavLink>
<button><span>Playlist</span></button>
<button><span>About</span></button>
</div>
</div>
</div>
<div class = "music-content-container">
<div class = "music-box">
<div class = "user-musics">
<ul>
{musics && musics.map((name, i)=>{
console.log()
return(
<>
//it does not render the third array properly
<li key = {i}><button onClick = {play} value = {name}>Play</button>{name}</li>
</>
)
})}
</ul>
</div>
</div>
</div>
</div>
<AudioPlayer progVal = {progVal} stop = {stop} playAudio = {playAudio}/>
<Header />
</>
)
}
export default Music
//update: my data from firebase looks like this:
and this code will select title of each data
useEffect(()=>{
firebase.database().ref("users/"+uID+"/public/songs/").on("value", (snapshot)=>{
//stores data in music.
music = snapshot.val()
console.log(music)
//gets all title of the data
Object.values(music).forEach((value)=>{
tracksTitle.push(value.title)//pushes titles to tracksTitle
})
setMusics(tracksTitle) //stores all track in musics
})the button of "fikka fikka" doesnt even work when i hover over the "fikka fikka" it doesnt even change the cursor to text curosr while in ed sheeran and one direction it doesnt have that problem
Share Improve this question edited Dec 9, 2020 at 8:23 DjBillje Official asked Dec 9, 2020 at 7:50 DjBillje OfficialDjBillje Official 3862 gold badges4 silver badges18 bronze badges 6- 1 For one you're using the index of the array as the key. This will cause problems. If the songs have unique names you could use the name itself as the key. Your use of fragments is also problematic. In this case using fragments makes close to no sense. – Lars Holdaas Commented Dec 9, 2020 at 7:58
- @Laras thank you, i tried that, but i dont know why, the third rendered item is not being rendered properly, i cannot select the text and i cannot click on button too. – DjBillje Official Commented Dec 9, 2020 at 8:04
-
1
So, if I'm reading this correctly,
musicsis simply an array of the titles? Is the react key error resolved with one of the solutions provided here? Can you describe a bit more what you mean the 3rd list item isn't working? Is it just the 3rd? (The 1st, 2nd, 4th, 5th, etc.. all work?) If the react key issue is resolved and you've now some new error then might I suggest asking a new question for the new issue? – Drew Reese Commented Dec 9, 2020 at 8:19 -
1
In that last screencap it appears the mapping of
lielements worked exactly as expected. Seems like something (an invisible element) is overlaying your UI and not allowing clicks to go through. Have you inspected the DOM as well to see what all is being rendered to the screen? – Drew Reese Commented Dec 9, 2020 at 8:29 - 1 Well, the list elements themselves have no classnames assigned to them, but I was referring more anything else in the UI that may be covering them from the mouse, i.e. some non-visible, absolutely positioned elements. – Drew Reese Commented Dec 9, 2020 at 8:33
1 Answer
Reset to default 8React keys need to be on the outer-most returned element from the mapping.
{musics && musics.map((name, i)=>{
return(
<Fragment key={i}>
//it does not render the third array properly
<li>
<button onClick={play} value={name}>Play</button>
{name}
</li>
</Fragment>)
})}
Notice here that in order to do this the react fragment shorthand is inpatible, you must use the Fragment ponent. Or since there is only a single element the Fragment is mostly useless, remove it and place the key on the li where it was.
{musics && musics.map((name, i)=>{
return(
<li key={i}>
<button onClick={play} value={name}>Play</button>
{name}
</li>)
})}