getting "Cannot read property "map" of undefined - reactjs

Question

I am getting "Cannot read property "map" of undefined (it is referring to tradeData) from the TradeDataList.js file. I am calling an API that is called through search term that is passed to "unirest" get function. I have setup context API passing some centralized values to various other files. I have it set up as an array in the useState. I am loosing my head with this if anyone can help please. The files I have are the following:
context.js
import React, { useState, useContext, useEffect } from 'react'
import { useCallback } from 'react'
var unirest = require('unirest');
const url = 'https://api.someurl.com/oauth/client_credential/accesstoken' ;
const Browse_URL = 'https://api.someurl.com/tradesregister/v1/browse' ;
const MY_API_KEY = 'EpVhCPGX4lzMwzdXVKG7yYFubGtwmlYU4343434';
const Authorization = 'Basic RXBWaENQR1g0bHpNd3pkWFZLRzd5WUZ1Ykd0d21sWVU6M2NvcEVuQTVEZlJXZ3BSYw==' ;
const AppContext = React.createContext()
const AppProvider = ({ children }) => {
const [token, setToken] = useState('') ;
const [loading, setLoading] = useState(true) ;
const [tradeData, setTradeData] = useState([]) ;
const [searchTerm, setSearchTerm] = useState('')
const getToken = () => {
unirest.get(url)
.header({'Accept': 'application/json', 'authorization': Authorization})
.query({"grant_type": "client_credentials"})
.end(function (response) {
const token = response.body["access_token"] ;
//console.log(token) ;
setToken(token)
})
}
useEffect (() => {
// call the getToken function
getToken() ;
}, [])
//Get the new token to access trade data
const newAuth = 'Bearer ' + token
return (
<AppContext.Provider
value={{ token,
MY_API_KEY,
newAuth,
Browse_URL,
loading,
setTradeData,
tradeData,
setLoading,
searchTerm,
setSearchTerm
}}
>
{children}
</AppContext.Provider>
)
}
export const useGlobalContext = () => {
return useContext(AppContext)
}
export { AppContext, AppProvider }
SearchForm.js (call starts from here )
import React, { useEffect, useState } from 'react'
import { useGlobalContext } from '../context'
import TradeDataList from './TradeDataList'
//import Loading from './Loading'
var unirest = require('unirest');
const SearchForm = () => {
const {searchTerm, setSearchTerm,loading, setLoading, tradeData, setTradeData, MY_API_KEY, newAuth, Browse_URL } = useGlobalContext();
//const [tradeData, setTradeData] = useState([]) ;
const getTrade = () => {
setLoading(true)
unirest.get(Browse_URL)
.header({'Accept': 'application/json', 'authorization': newAuth, "apikey": MY_API_KEY })
.query({"searchText": searchTerm })
.end(function (response) {
const tradeData = response.body ;
//console.log(tradeData) ;
setTradeData(tradeData)
setLoading(false);
})
}
useEffect (() => {
// call the getTrade function
getTrade() ;
}, [])
const handleSubmit = (e) => {
e.preventDefault() ;
getTrade() ;
}
console.log('here is the data' ,tradeData)
return (
<section className="section-search">
<form className="search-form" onSubmit={handleSubmit}>
<div className="form-control">
<label htmlFor='searchTerm'> search trade licence info</label>
<input
type='text'
id='searchTerm'
//ref={searchValue} //reference
value={searchTerm}
//onChange={searchTrade}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
<button type="submit">Submit</button>
</form>
<div className="cocktails-center">
<TradeDataList tradeData={tradeData} />
</div>
</section>
)
}
export default SearchForm
TradeList.js
import React from 'react'
import TradeData from './TradeData'
//import Loading from './Loading'
//import { useGlobalContext } from '../context'
/**
* This page displays TradeData and loading
*/
const TradeDataList = ({ tradeData }) => {
//display loading while cocktails are being loaded
return (
<section className="section">
<h2 className="section-title">
Trade Data
</h2>
{/* <h2>cocktail list</h2> */}
<div className="cocktails-center">
{tradeData.map((trade) => {
// this is to be handled by Cocktail component
return <TradeData key={trade.licenceID} {...trade} />
})}
</div>
</section>
)
}
export default TradeDataList
TradeData.js
import React from 'react'
import { Link } from 'react-router-dom'
//image,name,id,info,glass
const TradeData = ({
licenceID,
licensee,
licenceName,
licenceNumber,
licenceType,
status,
suburb,
postcode,
businessNames,
categories,
classes
}) => {
return (
<article className="cocktail">
<div className="img-container">
<h1>This is header </h1>
</div>
<div className="cocktail-footer">
<h3>{licenceID}</h3>
<p>{licensee}</p>
<h4>{licenceName}</h4>
<p>{licenceType}</p>
{/* <Link to={`/cocktail/${id}`} className="btn btn-primary
btn-details">details</Link> */}
</div>
</article>
)
}
export default TradeData

Answer 1

Inside your TradeList.js you simply need to add a check condition:
<div className="cocktails-center">
{tradeData?tradeData.map((trade) => {
// this is to be handled by Cocktail component
return <TradeData key={trade.licenceID} {...trade} />
}):null}
</div>

Answer 2

Another alternative solution
{ tradeData && tradeData.map((trade) => {
// this is to be handled by Cocktail component
return <TradeData key={trade.licenceID} {...trade} />
})}
Note: The .map function is only available on array.
If data isn't in the format you are expecting it to be (it is {} but you are expecting []).