How to access variables outside of map function? - reactjs

Question

Have looped over some data in my applicaition but I was wondering if I could access variables outside the map function?
I am trying to read a count of my data, however the object.unit_test_count(which is shown in asteriks) is coming back as object is not defined? How do I access that unit_test_count from the objectsToShow.map function? (also shown in asteriks)
<div className={getGridClassName()} style={{backgroundColor: 'var(--main-color)', color: '#fff', fontWeight: '500'}}>
<div />
**<div>Object{object.unit_test_count}</div>**
<div />
{props.location.pathname === '/requesttest' ?
<React.Fragment>
<div style={{textAlign: 'center'}}># Unit Tests</div>
<div style={{textAlign: 'center'}}>Select</div>
</React.Fragment>
:
<React.Fragment>
<div style={{textAlign: 'center'}}>Passes</div>
<div style={{textAlign: 'center'}}>Fails</div>
<div style={{textAlign: 'center'}}>
<Tooltip title={'hello'}>Errors<InfoIcon/>
</Tooltip>
</div>
<div style={{textAlign: 'center'}}>N/A<InfoIcon /></div>
<div style={{textAlign: 'center'}}># Units Tests</div>
</React.Fragment>
}
</div>
{!objectsToShow ? null : **objectsToShow.map(object =>**
<div key={object.object} className={getGridClassName(object)}>
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
<Tooltip title={object.relation.charAt(0).toUpperCase() + object.relation.substr(1).toLowerCase()}>
<div className='RelationInitialBox' style={{backgroundColor: getRelationColor(object.relation)}}>
{object.relation.charAt(0).toUpperCase()}
</div>
</Tooltip>
</div>
<div
className='ClickableText'
style={{wordBreak: 'break-all'}}
onClick={() => onObjectClick(object.object)}
>
{object.object}
</div>
<div>{object.is_critical ? 'Critical' : ''}</div>
{props.location.pathname === '/requesttest' ?
<React.Fragment>
<div style={{textAlign: 'center'}}>{object.unit_test_count}</div>
<div style={{textAlign: 'center'}}>
<Checkbox mainColor changeHandler={props.handleObjectsCheckbox} data={object} />
</div>
</React.Fragment>
:
<React.Fragment>
<div style={{color: 'green', textAlign: 'center'}}>{object.unit_test_passes}</div>
<div style={{color: 'red', textAlign: 'center'}}>{object.unit_test_fails}</div>
<div style={{color: 'red', textAlign: 'center'}}>{object.unit_test_errors}</div>
<div style={{textAlign: 'center'}}>{object.unit_test_not_applicable}</div>
<div style={{textAlign: 'center'}}>{object.unit_test_count}</div>
</React.Fragment>
}
</div>
)}
Update syntax error:
Syntax error image
objectsToShow.map(item =>
<div className='Card' style={{overflow: 'visible'}}>
<div className={getGridClassName()} style={{backgroundColor: 'var(--main-color)', color: '#fff', fontWeight: '500'}}>
<div />
<div>Object{item.unit_test_count}</div>
<div />
{props.location.pathname === '/requesttest' ?
<React.Fragment>
<div style={{textAlign: 'center'}}># Unit Tests</div>
<div style={{textAlign: 'center'}}>Select</div>
</React.Fragment>
:
<React.Fragment>
<div style={{textAlign: 'center'}}>Passes</div>
<div style={{textAlign: 'center'}}>Fails</div>
<div style={{textAlign: 'center'}}>
<Tooltip title={'hello'}>Errors<InfoIcon/>
</Tooltip>
</div>
<div style={{textAlign: 'center'}}>N/A<InfoIcon /></div>
<div style={{textAlign: 'center'}}># Units Tests</div>
</React.Fragment>
}
</div>
)
{!objectsToShow ? null : objectsToShow.map(object =>
<div key={object.object} className={getGridClassName(object)}>
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
<Tooltip title={object.relation.charAt(0).toUpperCase() + object.relation.substr(1).toLowerCase()}>
<div className='RelationInitialBox' style={{backgroundColor: getRelationColor(object.relation)}}>
{object.relation.charAt(0).toUpperCase()}
</div>
</Tooltip>
</div>
<div
className='ClickableText'
style={{wordBreak: 'break-all'}}
onClick={() => onObjectClick(object.object)}
>
{object.object}
</div>
<div>{object.is_critical ? 'Critical' : ''}</div>
{props.location.pathname === '/requesttest' ?
<React.Fragment>
<div style={{textAlign: 'center'}}>{object.unit_test_count}</div>
<div style={{textAlign: 'center'}}>
<Checkbox mainColor changeHandler={props.handleObjectsCheckbox} data={object} />
</div>
</React.Fragment>
:
<React.Fragment>
<div style={{color: 'green', textAlign: 'center'}}>{object.unit_test_passes}</div>
<div style={{color: 'red', textAlign: 'center'}}>{object.unit_test_fails}</div>
<div style={{color: 'red', textAlign: 'center'}}>{object.unit_test_errors}</div>
<div style={{textAlign: 'center'}}>{object.unit_test_not_applicable}</div>
<div style={{textAlign: 'center'}}>{object.unit_test_count}</div>
</React.Fragment>
}
</div>
)}
<PageNumbers pageNumbersList={pageNumbers} currentPage={currentPage} onClick={onPageNumberClick} />
</div>
)
})
objectsView.propTypes = {
objects: PropTypes.array,
status: PropTypes.oneOf(['', 'Failed', 'Success', 'Unresolved']),
onObjectClick: PropTypes.func,
handleObjectsCheckbox: PropTypes.func
}
export default withRouter(objectsView)

Answer 1

In this below line,
<div style={{textAlign: 'center'}}>{object.unit_test_count}</div>
map() will check for the property on the variable name you passed to map at
{!objectsToShow ? null : **objectsToShow.map(object =>**
So you can change that variable name to something else.
Or
You can assign object.unit_test_count to any other variable and use it inside the loop.