How to use the reactstrap.Badge function in reactstrap

ThreadsModal.prototype.render = function () {
        var _this = this;
        var _a = this.props, showModal = _a.showModal, handleClose = _a.handleClose, threadDump = _a.threadDump;
        var counters = {};
        var filteredList = null;
        if (threadDump && threadDump.threads) {
            counters = this.computeCounters();
            filteredList = this.computeFilteredList();
        }
        return (React.createElement(reactstrap_1.Modal, { isOpen: showModal, toggle: handleClose, className: "modal-lg" },
            React.createElement(reactstrap_1.ModalHeader, { toggle: handleClose }, "Threads dump"),
            React.createElement(reactstrap_1.ModalBody, null,
                React.createElement(reactstrap_1.Badge, { color: "primary", className: "hand", onClick: this.updateBadgeFilter('') },
                    "All\u00A0",
                    React.createElement(reactstrap_1.Badge, { pill: true }, counters.threadDumpAll || 0)),
                "\u00A0",
                React.createElement(reactstrap_1.Badge, { color: "success", className: "hand", onClick: this.updateBadgeFilter('RUNNABLE') },
                    "Runnable\u00A0",
                    React.createElement(reactstrap_1.Badge, { pill: true }, counters.threadDumpRunnable || 0)),
                "\u00A0",
                React.createElement(reactstrap_1.Badge, { color: "info", className: "hand", onClick: this.updateBadgeFilter('WAITING') },
                    "Waiting\u00A0",
                    React.createElement(reactstrap_1.Badge, { pill: true }, counters.threadDumpWaiting || 0)),
                "\u00A0",
                React.createElement(reactstrap_1.Badge, { color: "warning", className: "hand", onClick: this.updateBadgeFilter('TIMED_WAITING') },
                    "Timed Waiting\u00A0",
                    React.createElement(reactstrap_1.Badge, { pill: true }, counters.threadDumpTimedWaiting || 0)),
                "\u00A0",
                React.createElement(reactstrap_1.Badge, { color: "danger", className: "hand", onClick: this.updateBadgeFilter('BLOCKED') },
                    "Blocked\u00A0",
                    React.createElement(reactstrap_1.Badge, { pill: true }, counters.threadDumpBlocked || 0)),

React.createElement(reactstrap_1.ModalBody, null,
                React.createElement(reactstrap_1.Badge, { color: "primary", className: "hand", onClick: this.updateBadgeFilter('') },
                    "All\u00A0",
                    React.createElement(reactstrap_1.Badge, { pill: true }, counters.threadDumpAll || 0)),
                "\u00A0",
                React.createElement(reactstrap_1.Badge, { color: "success", className: "hand", onClick: this.updateBadgeFilter('RUNNABLE') },
                    "Runnable\u00A0",
                    React.createElement(reactstrap_1.Badge, { pill: true }, counters.threadDumpRunnable || 0)),
                "\u00A0",
                React.createElement(reactstrap_1.Badge, { color: "info", className: "hand", onClick: this.updateBadgeFilter('WAITING') },
                    "Waiting\u00A0",
                    React.createElement(reactstrap_1.Badge, { pill: true }, counters.threadDumpWaiting || 0)),
                "\u00A0",
                React.createElement(reactstrap_1.Badge, { color: "warning", className: "hand", onClick: this.updateBadgeFilter('TIMED_WAITING') },
                    "Timed Waiting\u00A0",
                    React.createElement(reactstrap_1.Badge, { pill: true }, counters.threadDumpTimedWaiting || 0)),
                "\u00A0",
                React.createElement(reactstrap_1.Badge, { color: "danger", className: "hand", onClick: this.updateBadgeFilter('BLOCKED') },
                    "Blocked\u00A0",
                    React.createElement(reactstrap_1.Badge, { pill: true }, counters.threadDumpBlocked || 0)),
                "\u00A0",
                React.createElement("div", { className: "mt-2" }, "\u00A0"),
                React.createElement(reactstrap_1.Input, { type: "text", className: "form-control", placeholder: "Filter by Lock Name...", onChange: this.updateSearchFilter }),
                React.createElement("div", { style: { padding: '10px' } }, filteredList
                    ? filteredList.map(function (threadDumpInfo, i) { return (React.createElement("div", { key: "dump-" + i },
                        React.createElement("h6", null,
                            ' ',
                            React.createElement("span", { className: 'badge ' + _this.getBadgeClass(threadDumpInfo.threadState) }, threadDumpInfo.threadState),
                            "\u00A0",
                            threadDumpInfo.threadName,
                            " (ID ",
                            threadDumpInfo.threadId,

var Badge = function Badge(props) {
  var children = props.children;
  return React__default.createElement(reactstrap.Badge, props, children);
};