如何在 React 中导入 Bootstrap 组件？

Question

I'm trying to integrate checkboxes from bootstrap or reactstrap in React. I'm getting a common error, looked into relevant posts , still cannot figure it out. How do I fix this error:

Error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Source of Error

The problem should be here in these two lines, which I'm not sure what it is.

import { InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
import FormControl from 'react-bootstrap/FormControl';

If we'd remove these lines and the HTML copied below, it does not give any Error.

HTML

          <div>
            <InputGroup className="mb-3">
              <InputGroup.Prepend>
                <InputGroup.Checkbox aria-label="Checkbox for following text input" />
              </InputGroup.Prepend>
              <FormControl aria-label="Text input with checkbox" />
            </InputGroup>
            <InputGroup>
              <InputGroup.Prepend>
                <InputGroup.Radio aria-label="Radio button for following text input" />
              </InputGroup.Prepend>
              <FormControl aria-label="Text input with radio button" />
            </InputGroup>
          </div>

Demo

[Thanks. I'm new to React.]

Answer 1

prepend is one value of the addonType prop of InputGroupAddOn or InputGroupButton. it's not a property of the InputGroup import. InputGroup.Prepend is undefined, which is why React is complaining.

according to the reactstrap docs , you want this:

InputGroupAddOn.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
  className: PropTypes.string
};

InputGroupButton.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
  children: PropTypes.node,
  groupClassName: PropTypes.string, // only used in shorthand
  groupAttributes: PropTypes.object, // only used in shorthand
  className: PropTypes.string
};

Answer 2

In your component you camelcase inputGroupAddOn when declaring the prop types. When you imported it you didn't camel case the add on part, you're importing InputGroupAddon . That might be another issue you're having.

Answer 3

The Latest version of reactstrap doesn't support the use of InputGroupAddon . Use it directly from bootstrap.

<div className="input-group-append">
  <span className="input-group-text" id="basic-addon2">Search</span>
</div>