Player not rerendering when URIs changes

[thuypx09]

Here's my code, when I update URIs in by another component, the parent Player component is rerendered but the song did not change. I need to put a key prop to SpotifyPlayer to trigger rerender manually. Not sure how you guys handle song changes.

Thanks a lot!

import SpotifyPlayer from 'react-spotify-web-playback';
import { getJwtToken } from '../../spotify/utils';
import { useContext } from 'react';
import { AppContext } from '../../context/DataLayer';


function Player() {
    const { data } = useContext(AppContext)

    const token = getJwtToken()

    const styles = {
        bgColor: '#181818',
        color: '#fff',
        activeColor: '#16a34a',
        loaderColor: '#fff',
        sliderColor: '#fff',
        sliderTrackColor: '#5e5e5e',
        sliderHandleColor: 'transparent',
        trackArtistColor: '#ccc',
        trackNameColor: '#fff',

    }
    return (
        <>
            <div className="bg-[#181818] fixed bottom-0 inset-x-0 h-24 w-full flex items-center">
                <SpotifyPlayer
                    key={`${data.playingSongs[0]?.toString()}`}
                    token={token}
                    uris={data.playingSongs}
                    play={data.playing}
                    styles={styles}
                    hideAttribution={true}
                    magnifySliderOnHover={true}
                    name={`Thui's Spotify Clone`}
                    showSaveIcon={true}
                />
            </div>
        </>
    )
}

export default Player

[gilbarbara]

Please try v0.13.4
And remove the key! :)