Adding an Audio object to my react state array - html

Question

componentWillMount() {
console.log('Component WILL MOUNT!')
axios.get('/channels').then( (res) => {
console.log(res.data.data.playList);
this.setState({
categories: res.data.data.playList,
audioList: res.data.data.playList.url
})
}).catch( (err) => {
console.log(err);
});
}
In my componentWillMount() I get bunch of mp3 urls from a database and stores into a state called audioList so it has a bunch of URLs of a sound file. However, what I actually want to store is an Audio object (HTML5 Audio).
Usually, to make it playable, I would have to make a new Audio object like
this.audio = new Audio([URL]);
then do
this.audio.play()
Since I want to make a list of music, I would like to but everything like
this.state.audioList = [ audioObject1, audioObject2, audioObject3, ... ]
How can I do this?
EDIT
componentWillMount() {
console.log('Component WILL MOUNT!')
let playLists = [];
axios.get('/channels').then( (res) => {
//console.log(res.data.data.playList);
res.data.data.playList.map((value, key) => playLists.push(new Audio(value.url)));
this.setState((prevState) => {
return { audioList: playLists}
}, () => console.log("dddd" + this.state.audioList));
}).catch( (err) => {
console.log(err);
});
}
This gives me
EDIT2
componentWillMount() {
console.log('Component WILL MOUNT!')
let playLists = [];
axios.get('/channels').then( (res) => {
//console.log(res.data.data.playList);
res.data.data.playList.map((value, key) => playLists.push(new Audio(value.url)));
this.setState((prevState) => {
return { audioList: playLists, categories: res.data.data.playList}
});
}).catch( (err) => {
console.log(err);
});
}

Answer 1

You can try with array push like below for objects available inside array,
let playlists = [];
res.data.data.playList.map((value, key) => playlists.push(new Audio(value.url)));
this.setState((prevState) => {
return { audioList: playlists}
}, () => console.log(this.state.audioList));