render()

in lti-components/web/src/components/UserInfo.js [25:68]
42 lines of code
4 McCabe index (conditional complexity)

    render() {
        return (
            <>
            <div onClick={this.handleVisibility}>
                <FontAwesomeIcon icon={faUser} className="mr-1" /> {this.props.principal.user.name||``}
            </div>
    
            <Modal show={this.state.show} onHide={this.handleVisibility} >
                <Form>
                    <Modal.Header closeButton>
                        
                    <Modal.Title><FontAwesomeIcon icon={faUser} className="mr-1" /> {this.props.principal.user.name||``}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                    <Container>
                        <Row className="mb-2">
                            <Col xs={3}><b>Name</b></Col>
                            <Col xs={1}>:</Col>
                            <Col xs={8}>{this.props.principal.user.name||``}</Col>
                        </Row>
                        <Row className="mb-2">
                            <Col xs={3}><b>Email</b></Col>
                            <Col xs={1}>:</Col>
                            <Col xs={8}>{this.props.principal.user.email||``}</Col>
                        </Row>
                        <Row>
                            <Col xs={3}><b>Privileges</b></Col>
                            <Col xs={1}>:</Col>
                            <Col xs={8}>
                                {this.props.principal.user.roles.map((role, idx) => {
                                    return (<Badge key={`userRole${idx}`} className="mr-2" variant="info">{role}</Badge>)
                                })}
                            </Col>
                        </Row>
                        </Container>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.handleVisibility}>Close</Button>
                    </Modal.Footer>
                </Form>
            </Modal>
            </>
        );
    }