0

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)

0 Answers0