title: Undefined is not a function (near '... map ...')
body: <p>When I tap in the Pressable element in the JSX I get the error : Undefined is not a function (near '... wines.map ...'). The log says it's coming from the <code>wines.map</code> loop in the JSX. I'm unsure on what could be wrong with how I'm trying to change the data in the <code>toggle</code> function or how I set the default <code>useState</code> array object. The code is supposed to toggle between two different kind of images for each button independently.</p>
  <pre><code>/**
   * Sample React Native App
   * https://github.com/facebook/react-native
   *
   * @format
   * @flow strict-local
   */
  import 'react-native-gesture-handler';
  import React, {useState} from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    ImageBackground,
    Image,
    TextInput,
    Button,
    TouchableNativeFeedback,
    TouchableWithoutFeedback,
    TouchableOpacity,
    TouchableHighlight,
    FlatList,
    Pressable,
    RecyclerViewBackedScrollViewComponent
  } from 'react-native';
  
  import { Immersive } from 'react-native-immersive';
  
  
  const fullWine = require('../images/selected-wine.png');
  const emptyWine = require('../images/empty-wine-icon.png');
  
  
  
  const WineList = () =&gt; {
  
  
      Immersive.on()
      Immersive.setImmersive(true)
  
  
  
      const [wines, setWines] = useState([
   
          {
              name: &quot;2018 Prezzo&quot;,
              info: &quot;What dsbetter way to spend a lazy afternoon than sipping away on this wine.&quot;,
              imageUrl: emptyWine
  
          },
          {
              name: &quot;2018 Coqueta&quot;,
              info: &quot;A litstle flirty wine.&quot;,
              imageUrl: emptyWine
          }
         
      ])
    
      function toggle(pressedWine){
  
          let oldWines = [...wines]
  
          
          let newWines = oldWines.map((wine) =&gt; {
              
              if(wine === pressedWine){
                  if(wine.imageUrl == emptyWine){
                      wine.imageUrl = fullWine;
                  } else {
                      wine.imageUrl = emptyWine;
                  }
              }
              return wine;
          });
         
          setWines({newWines});
  
          // setWines({newWines});
      }
     
  
      return (
      &lt;View style={{flex:1}}&gt;  
          &lt;ScrollView style={styles.scrollView}&gt;
              &lt;View style={styles.headerMessage}&gt;
                  &lt;Text style={styles.headerMessageText}&gt;Select your wines for tasting&lt;/Text&gt;
              &lt;/View&gt;
  
              &lt;View style={[styles.wineListWrapper]}&gt;
  
                  { wines.map((wine, index) =&gt; {
                      return(
                      &lt;View key={index} style={[styles.item]}&gt;
                          &lt;Image source={require('../images/Peresozo2018.png')} style={[styles.bottle]} /&gt;
  
                          &lt;View style={[styles.infoWrapper]}&gt;
                          
                      
                              &lt;Text style={[styles.itemTitle]}&gt;{wine.name}&lt;/Text&gt;
                              &lt;Text style={[styles.itemInfo]}&gt; 
                              
                                  {wine.info}
                              
                              &lt;/Text&gt;
                          &lt;/View&gt;
  
                          &lt;Pressable onPress={ (wine) =&gt; toggle(wine) }  style={[styles.wineIcon]}&gt;
                              &lt;Image source={wine.imageUrl}  /&gt;
                          &lt;/Pressable&gt;
  
  
                      &lt;/View&gt;
                      )
                  
                  })}
  
                   
              &lt;/View&gt;
          &lt;/ScrollView&gt;
          
          &lt;TouchableOpacity  onPress={() =&gt; alert('yo') }  style={[styles.footerButton]}&gt;
              &lt;Text style={[styles.footerText]}&gt;Start Tasting&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
      &lt;/View&gt;    
          
      )
  }
  
  const styles = StyleSheet.create({
      footerButton:{
          flex:1,
          justifyContent: 'flex-end',
          alignContent:'center',
          alignItems:'center',
          backgroundColor:'white',
          paddingTop:90
      
      },
      footerText:{
          fontFamily: 'Charm-Regular',
          fontSize:40,
          color:'#624124'
          
          
      },
      item:{
          flex:1,
          flexDirection: 'row',
          justifyContent: 'space-between',
          padding: 10
      },
      infoWrapper:{
          flex:0.7, 
          flexWrap: 'wrap', 
          flexDirection: 'row', 
          padding:10, 
          alignSelf:'flex-start',
          justifyContent: 'space-between',
          marginTop: -30,
          marginLeft:1
      },
      itemTitle:{
          color:'white',
          fontFamily: 'Charm-Regular',
          fontSize: 40,
          
      },
      itemInfo:{
          color:'white',
          fontSize: 20,
          
      },
      wineIcon:{
          padding:5,
          flex:0.15
      },
      wineListWrapper:{
          marginLeft: 10,
          marginTop: 40
      },
      bottle:{
          marginLeft: 2,
          width: 80,
          height: 250,
          resizeMode: 'contain',
         
          
      },
      scrollView:{
          backgroundColor: '#4B4239',
      },
      headerMessage:{
          backgroundColor: 'white',
          flex: 1,
          alignItems: 'center',
          alignContent: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          alignSelf: 'center',
          width:400,
          borderRadius: 4,
          padding: 0,
          marginTop: 10
  
  
      },
      headerMessageText:{
          color: '#4B4239',
          textAlign: 'center',
          fontSize: 30,
          fontFamily: 'Charm-Regular',
          lineHeight: 50
      }
  
  })
  
  export default WineList
  </code></pre>