SOLVED: ControlLabel from React Bootstrap throws Warning

Last updated on 10 Apr, 2021

When we try to install react-bootstrap, at the time of writing, version 1.0.0-beta.16 is installed. This version of react-bootstrap does not export a component with name ControlLabel. So if we try to use it in our code like:

  <FormControl className="input-person" onChange="{this.onPersonChange}" />

It will throw a warning, saying:

Warning: React.createElement: 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.
Control label warning

ControlLabel was in older versions of react-bootstrap. Instead of ControlLabel, we can import FormLabel and use it to solve the issue.

import {
} from "react-bootstrap";


  <FormControl className="input-person" onChange={this.onPersonChange} />

Above code shows the updated import statement and the updated JSX to be used inside React component.

--- ○ ---
Joby Joseph
Web Architect