TypeError: Cannot read property React JS

    export default function Detail(props){

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

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?

Answer

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

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