TypeError: Cannot read property React JS

    export default function Detail(props){

        <Modal  {...props}>
            <Modal.Header closeButton style={{ backgroundColor: '#6595FC', color:'white' }}>
                <Modal.Title style={{ wordBreak: 'break-all' }}>
                    {props.jobname} Details
                        {props.detailData.detailData ? props.detailData.detailData[0].WORKFLOW_NAME : ''}
                        {props.detailData.detailData ? props.detailData.detailData[0].SQL_ID : ''} 
                <Button variant="primary" style={{ backgroundColor: '#6595FC' }}>Restart</Button>

When there is data it works perfectly fine but when there is no data, it gives me the error

TypeError: Cannot read property ‘WORKFLOW_NAME’ of undefined

props.detailData.detailData ? props.detailData.detailData[0].WORKFLOW_NAME : ‘ ‘ isnt this suppose to work like a null & empty check?


David’s answer is perfect. But you also can do this:

props.detailData?.detailData[0]?.WORKFLOW_NAME || ''