[FIXED] How can i validate the content of a variable?

Issue

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: {…}, … }

Solution

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>

Answered By - Jeffrey Ram

Answer Checked By - Pedro (PHPFixing Volunteer)