Type error in react when accessing data from an object array

Question

I am trying to access the resolution timestamp variable from regressions_test_summary however I am getting a type error saying cannot read property of 'resolution_map' undefined.

Variable I am trying to access:

Code from function:

export const getRegressionTestStatus = summary => {
  if(summary.regression_test_summary.resolution_timestamp === null) return 'Unresolved'
  else if(summary.unit_test_fails || summary.unit_test_errors) return 'Failed'
  else if(!summary.unit_test_fails && !summary.unit_test_errors) return 'Success'
  console.log('from summary', summary);
}


export const getLogIcon = (unitTest, size) => {
  if(unitTest.result && typeof(unitTest.result[0]) === 'string') {
    return <ErrorIcon className={`LogIcon${size} TestError`} />
  } 
  else {
    return <FiberManualRecordIcon 
      className={`LogIcon${size} ${!unitTest.result ? 'TestNA' : unitTest.result[0] ? 'TestPass' : 'TestFail'}`} 
    />
  }
}

regressiontestData:

const getIcon = (summary) => {
    const status = getRegressionTestStatus(summary)

    if(status === 'Unresolved') return <ScheduleIcon style={{color: 'var(--update-bg-color)'}} />
    else if(status === 'Failed') return <CloseIcon style={{color: 'var(--reject-fg-color)'}} />
    else if(status === 'Success') return <CheckIcon style={{color: 'var(--approve-bg-color)'}} />


    console.log('summary', summary);


  }

useEffect(() => {
    async function onLoadRegressionTests() {
      loading.setLoading(true)
      const results = await verifiedGet(`get_regression_tests/${(currentPage - 1) * resPerPage}/${resPerPage}`, user.user)
      if(results.status === 0) {
        setRegressionTestsData(results.data)
        setPageNumbers(getPageNumbersList(results.total_count, resPerPage))
      } else if(results.status >=20 && results.status <=30) {
        snackbar.statusCheck(results)
        user.setSessionTokenMatches(false)
      } else snackbar.statusCheck(results)
      loading.setLoading(false)
    }
     if(user.f_auth([1, 20])) onLoadRegressionTests()
     else setRegressionTestsData('You do not have the authority to view this page.')
  }, [currentPage])

  const onRegressionTestClick = (id) => props.history.push(`test?id=${id}`)

  const onRequestRegressionTestClick = () => props.history.push('/requesttest')

  const onPageNumberClick = (pageNum) => {
    setCurrentPage(pageNum)
  }

It could be resulting from render cycle before the object or its properties are fully populated. Try adding some check for that before, e.g. summary && summary.regression_test_summary && ! summary.regression_test_summary.resolution_timestamp — MkMan
– MkMan, Commented Aug 26, 2020 at 2:54

Khanh Le Tran · Accepted Answer · 2020-08-26 03:48:00Z

1

I can see the summary is an array. You can not access properties of an element of arrays like this.

When you get the summary, try this:

const getIcon = summary.data.map((item) => {
        const status = getRegressionTestStatus(item)
    
        if(status === 'Unresolved') return <ScheduleIcon style={{color: 'var(--update-bg-color)'}} />
        else if(status === 'Failed') return <CloseIcon style={{color: 'var(--reject-fg-color)'}} />
        else if(status === 'Success') return <CheckIcon style={{color: 'var(--approve-bg-color)'}} />
)}

This will return a new array of Icon you want.

answered Aug 26, 2020 at 3:48

Khanh Le Tran

9005 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Type error in react when accessing data from an object array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related