I´m fetching data from an api that returns me the following object:
Object { kind: "customsearch#search", url: {…}, queries: {…}, context: {…}, searchInformation: {…}, items: (10) […] }
This data im storing it in a variable named resultData
in the following way:
const [searchText, setSearchText] = useState('');
const [resultData, setResultData] = useState({});
const [loading, setIsLoading] = useState(false);
function searchInGoogle(e){
const BASE_URL = `https://customsearch.googleapis.com/customsearch/v1`
const API_KEY = process.env.REACT_APP_SEARCH_KEY;
const SEARCH_ENGINE_KEY = process.env.REACT_APP_SEARCH_ENGINE_KEY;
var apiCall = `${BASE_URL}?key=${API_KEY}&cx=${SEARCH_ENGINE_KEY}&q=${searchText}`
axios.get(apiCall).then(function (response){
setIsLoading(true)
console.log(response.data)
setResultData(response.data)
setIsLoading(false)
}).catch(function(error){
console.log(error);
setIsLoading(false)
})
}
The thing that i am struggling with is that i am being able to access the items
property of the object but no the searchInformation
one.
For the items
property i am validating the content of the object so that i don´t get undefined:
const items = resultData.items?.map((item)=>{
return <Item key={item.id} title={item.title} description={item.snippet} url={item.formattedUrl}/>
}) ?? [] // return an empty array in case the result is undefined
Then i render the following way:
<div>
{
(resultData.items && Object.keys(resultData.items)) !== 0 ? <>
{items}
</> : <><p>No results</p></>
}
</div>
I am trying to do the same to access the searchInformation
which contains the time taken to search and the amount of results:
const searchInfo = resultData.searchInformation ? <p>About {resultData.searchInformation.formattedTotalResults} ({resultData.formattedSearchTime} seconds)</p> : <p></p>
And i am trying to render it this way:
<div>
{ (resultData.searchInformation && Object.keys(resultData.searchInformation)) !== 0 ? <>
{searchInfo.formattedResults}
</> : <p></p>
}
</div>
if i do console.log(searchInfo) i get on my console:
Object { "$$typeof": Symbol("react.element"), type: "p", key: null, ref: null, props: {…}, _owner: {…}, _store: {…}, … }
CodePudding user response:
You do not need to check if it's empty twice. You're also setting the variable searchInfo
to <p>...</p>
but you're rendering searchInfo.formattedResults
which it does not have. Try rendering searchInfo
instead of searchInfo.formattedResults
:
<div>{searchInfo}</div>
Or if you want to maintain your style of coding, you can try:
<div>
{ (resultData.searchInformation && Object.keys(resultData.searchInformation)) !== 0 ? <>
{searchInfo}
</> : <p></p>
}
</div>