title: React-native spotify api call returning [Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'data.items.name.map')]
body: <p>Hey so I'm working on a react-native app that is using the spotify Api. I'm currently trying to call the endpoint which returns a users playlists. The way I want the app to work is that when the user presses a button it calls the api and gets that users playlists. This is what my code looks like:</p>
  <pre><code>export default function SpotifyGetPlaylist() {
     
      const { colors } = useTheme();
      const [token, setToken] = useState('');
      const [data, setData] = useState({});
      
      React.useEffect(() =&gt; {
          getData();
      }, []);
  
     const getData = async() =&gt; {
             setToken (await AsyncStorage.getItem('@access_token'));
              console.log(&quot;token retrieved&quot;)
      }
  
     
      let playlistSearchApi = 'https://api.spotify.com/v1/me/playlists';
      const handleGetPlaylists = () =&gt; {
          fetch(playlistSearchApi, {
              method: 'GET',
              headers: { 'Authorization': 'Bearer ' + token }
            })
            .then(res =&gt; res.json())
            .then(data =&gt; {
              let result = [];
              console.log(data)
              data.items.name.map(obj =&gt; result.push({title: [obj.name]}));
              setData(result);
          });
      }
      const renderItem = ({item}) =&gt; {
          return( 
              &lt;View style={styles.item}&gt;
                  &lt;Text style={styles.playlistname}&gt;{item.title[1]}&lt;/Text&gt;
              &lt;/View&gt;
          );
      }
      return (
          &lt;View style={styles.container}&gt;
              &lt;Button onPress={handleGetPlaylists} color=&quot;#1DB954&quot; style={{  width: 100 }} title=&quot;Get your playlists&quot;/&gt;
              &lt;FlatList
              data={data}
              renderItem={renderItem}
              keyExtractor={item =&gt; item.title[1]}
              /&gt;
              
          &lt;/View&gt;
      )
  }
  </code></pre>
  <p>The API call works fine for me and this is what the return data looks like</p>
  <pre><code>Object {
    &quot;href&quot;: &quot;https://api.spotify.com/v1/users/fsjgg/playlists?offset=0&amp;limit=20&quot;,
    &quot;items&quot;: Array [
      Object {
        &quot;collaborative&quot;: false,
        &quot;description&quot;: &quot;&quot;,
        &quot;external_urls&quot;: Object {
          &quot;spotify&quot;: &quot;https://open.spotify.com/playlist/5MwIvSj1Fc8N5BQByhsLvM&quot;,
        },
        &quot;href&quot;: &quot;https://api.spotify.com/v1/playlists/5MwIvSj1Fc8N5BQByhsLvM&quot;,
        &quot;id&quot;: &quot;5MwIvSj1Fc8N5BQByhsLvM&quot;,
        &quot;images&quot;: Array [
          Object {
            &quot;height&quot;: 640,
            &quot;url&quot;: &quot;https://i.scdn.co/image/ab67616d0000b2735a037fd63963c053475b00cf&quot;,
            &quot;width&quot;: 640,
          },
        ],
        &quot;name&quot;: &quot;Run&quot;,
  </code></pre>
  <p>I'm getting [Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'data.item.name')] so I'm guessing the problem is in my render item?</p>