Getting error : "Possible Unhandled Promise Rejection (id: 2): TypeError: undefined is not a function (near '...myList.map...')"

Question

 WARN     Possible Unhandled Promise Rejection (id: 2):
> TypeError: undefined is not a function (near '...myList.map...')
> DataListing
> renderWithHooks@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:16110:33
> updateFunctionComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:17956:41
> invokeGuardedCallbackImpl@http://10.0.2.2:8081/index.bundle?> > > platform=android&dev=true&minify=false:9137:21
> invokeGuardedCallback@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:9231:42
> beginWork$$1@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:23943:34
> performUnitOfWork@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:23077:30
> workLoopSync@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:23059:45
> performSyncWorkOnRoot@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:22754:29
> performSyncWorkOnRoot@[native code]
> http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:12701:38
> unstable_runWithPriority@http://10.0.2.2:8081/index.bundle platform=android&dev=true&minify=false:47547:30
> flushSyncCallbackQueueImpl@http://10.0.2.2:8081/index.bundle?> > platform=android&dev=true&minify=false:12696:28
> flushSyncCallbackQueue@http://10.0.2.2:8081/index.bundle?> > platform=android&dev=true&minify=false:12685:35
> scheduleUpdateOnFiber@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:22344:37
> dispatchAction@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:16807:23 dispatchAction@[native code]
> http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:29074:31
> tryCallOne@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:28860:16
> http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:28961:27
> _callTimer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:32400:17
> _callImmediatesPass@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:32436:19
> callImmediates@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:32654:33
> callImmediates@[native code]
> __callImmediates@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2719:35
> http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2505:34
> __guard@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2702:15
> flushedQueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2504:21
> flushedQueue@[native code]
> invokeCallbackAndReturnFlushedQueue@[native code]

My code Snippet:

export default DataListing;
function DataListing({navigation}) {


    const [myList, setMyList] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {fetch('url')
.then(response => response.json())
.then(json => {setMyList(json.Products);})
.catch(err => console.error(err))
.finally(() => setLoading(false));}, [myList]);

return (<SafeAreaView><ScrollView> 
  {loading ? (<ActivityIndicator />) : (<>{myList.map((item, i) => (<ListItem 
   key={i} title={item.product_names} /> ))}</>)}</ScrollView> 
</SafeAreaView>);}

Answer 1

Issue solved. The data was remaining in a string format. So need to parse it before using though it was in a array format in the API.