TypeError: Cannot read property React JS

Question

    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?

You've established that detailData is defined but not that [0] is defined. If detailData is an empty array, then that'd cause this error, e.g. [][0].WORKFLOW_NAME reproduces the error. Please share a minimal reproducible example. — ggorlen
– ggorlen, Commented Jun 23, 2021 at 19:20

David · Accepted Answer · 2021-06-23 19:24:34Z

1

You're only checking if props.detailData.detailData itself is "truthy" (it exists). An empty array exists and passes this check, but it has no element at position 0 so the attempt to dereference that element will result in an error.

You can also add a length check:

(props.detailData.detailData && props.detailData.detailData.length > 0) ? props.detailData.detailData[0].WORKFLOW_NAME : ''

If you need to defend against other kinds of bad data you might also add an isArray() check, but that may be overkill.

answered Jun 23, 2021 at 19:24

David

221k42 gold badges245 silver badges337 bronze badges

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

Comments

FMoosavi · Accepted Answer · 2021-06-23 19:28:18Z

0

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

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

answered Jun 23, 2021 at 19:28

FMoosavi

1501 silver badge12 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property React JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related