CODEWITHSUNDEEP
reactjsjsxreact-bootstrap
user1399063
user1399063

Reputation: 151

react-bootstrap Form component

I have tried several times to use the <Form> and <FormControl> components. Everytime I use I keep getting same erros:

"warning.js?8a56:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of App."

"Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of App."

Even with this basic example:

import React, {Component} from 'react';
import {FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button} from 'react-bootstrap';

export default class App extends Component {
  render() {
    return (
      <form>
        <FormGroup controlId="formControlsText">
          <ControlLabel>Text</ControlLabel>
          <FormControl type="text" placeholder="Enter text" />
        </FormGroup>

        <Button type="submit">
          Submit
        </Button>
      </form>
    );
  }
}

Any ideas?

Upvotes: 13

Views: 18741

Answers (3)

Ninjaxor
Ninjaxor

Reputation: 998

I had a somewhat related issue and discovered they removed ControlLabel replacing it with FormLabel in more recent versions.

Change

import {FormControl, FormGroup, ControlLabel, etc... } from 'react-bootstrap';

To

import {FormControl, FormGroup, FormLabel, etc... } from 'react-bootstrap';

Upvotes: 0

Mirko Flyktman
Mirko Flyktman

Reputation: 266

Import your React-Bootstrap components like this:

import FormControl from 'react-bootstrap/lib/FormControl';

That helped me to get rid of the same error when using react-bootstrap 0.31.

Upvotes: 0

JazzCat
JazzCat

Reputation: 4573

Update the npm-package those components are new in react-bootstrap.

Upvotes: 3

Related Questions