I am having an issue concerning states and was wondering why its not setting. Inside my if statement in the for loop I am attempting to set the state of one of my objects but I have an issue with it not working. I have a console log and the item itself is returning a json object but when I try to set my state to it it won't set. This has been working for a while but suddenly stopped. I thought it was an issue with context perhaps so I tried making a state in this file and there was still no response. Sorry I am aware this code is messy I am just trying to get everything working before I continue with cleaning it up.
Here is a snippet of my code. `
const Dropdown = props => {
const [guessTrackDetail, setGuessTrackDetail] = useState({})
const {guessTracks,trackDetail, limit, playGame, setPlayGame, setSameName, setSameArtist, setSameYear, setSameAlbum, setSameType, setSameMinutes, setGuessTracks} = useContext(GameContext)
const [searchValue, setSearchValue] = useState("Select...")
const [test, setTest] = useState({})
//changed set guess track detail
const dropdownChanged = e => {
console.log(e.target.value)
console.log("THIS IS OPTIONS", props.options[0].track.name)
// console.log("THIS IS options", props.options[0].track.name)
for(var i = 0; i < limit; ++i){
if (props.options[i].track.name === e.target.value){
console.log("Found match:");
console.log(props.options[i].track);
setGuessTrackDetail(props.options[i].track)
setTest(props.options[i].track)
setGuessTracks([...guessTracks, props.options[i].track])
break;
}
}
console.log(props.options[0].track);
console.log("gues trac", guessTrackDetail);
setSameName(guessTrackDetail.name === trackDetail.name)
setSameArtist(guessTrackDetail.artists[0].name === trackDetail.artists[0].name)
setSameYear((guessTrackDetail.album.release_date).substring(0,4) === (trackDetail.album.release_date).substring(0,4))
setSameAlbum(guessTrackDetail.album.name === trackDetail.album.name)
setSameType(guessTrackDetail.album.album_type === trackDetail.album.album_type)
setSameMinutes(Math.floor(guessTrackDetail.duration_ms/60000 + 0.5) === Math.floor(trackDetail.duration_ms/60000 + 0.5) )
setSearchValue(e.target.value)
setPlayGame(true)
}
return (
<div className="dropDwn">
<div className="menu">
<label className="label">{props.label}</label>
<select value={props.selectedValue} onChange={dropdownChanged} className="form-control form-control-sm col-sm-10">
<option key={0}>{searchValue}</option>
{props.options?.map((item, idx) => <option key={idx + 1}>
{item.track.name}
</option>)}
</select>
</div>
<ul id="divider">
<li id="section">Album</li>
<li id="section">Artist</li>
<li id="section">Song Name</li>
<li id="section">Album Name</li>
<li id="section">Year</li>
<li id="section">Song Type</li>
<li id="section">Minutes</li>
</ul>
{playGame && <Game/>}
{/* pass in boolean as variable, clean up appjs when time */}
</div>
);
}
export default Dropdown;
`
And here is an example of the object I am tryin to store into. `
{
"album": {
"album_type": "album",
"artists": [
{
"external_urls": {
"spotify": "https://open.spotify.com/artist/0EmeFodog0BfCgMzAIvKQp"
},
"href": "https://api.spotify.com/v1/artists/0EmeFodog0BfCgMzAIvKQp",
"id": "0EmeFodog0BfCgMzAIvKQp",
"name": "Shakira",
"type": "artist",
"uri": "spotify:artist:0EmeFodog0BfCgMzAIvKQp"
}
],
"external_urls": {
"spotify": "https://open.spotify.com/album/5ppnlEoj4HdRRdRihnY3jU"
},
"href": "https://api.spotify.com/v1/albums/5ppnlEoj4HdRRdRihnY3jU",
"id": "5ppnlEoj4HdRRdRihnY3jU",
"images": [
{
"height": 640,
"url": "https://i.scdn.co/image/ab67616d0000b27327ddd747545c0d0cfe7595fa",
"width": 640
},
{
"height": 300,
"url": "https://i.scdn.co/image/ab67616d00001e0227ddd747545c0d0cfe7595fa",
"width": 300
},
{
"height": 64,
"url": "https://i.scdn.co/image/ab67616d0000485127ddd747545c0d0cfe7595fa",
"width": 64
}
],
"name": "Oral Fixation, Vol. 2 (Expanded Edition)",
"release_date": "2005-11-28",
"release_date_precision": "day",
"total_tracks": 13,
"type": "album",
"uri": "spotify:album:5ppnlEoj4HdRRdRihnY3jU"
},
}
`
(shortened the object quite a bit but the general idea)