Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 454
user1399063 Avatar asked Apr 24 '16 18:04

user1399063


People also ask

How do I use forms in bootstrap React?

Create the React Bootstrap Form import React, { Component } from 'react'; import Container from 'react-bootstrap/Container'; import Form from 'react-bootstrap/Form'; class SimpleForm extends Component { render() { return ( <Container> <Form> <Form. Group controlId="formName"> <Form. Label>Name</Form. Label> <Form.

What is FormControl in React?

The <FormControl> component renders a form control with Bootstrap styling. The <FormGroup> component wraps a form control with proper spacing, along with support for a label, help text, and validation state. To ensure accessibility, set controlId on <FormGroup> , and use <ControlLabel> for the label.

What is controlId in React?

controlId: It is used to set the id on <FormControl> and htmlFor on <FormGroup. Label> component.

What is Inputgroup React?

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.


1 Answers

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

like image 76
JazzCat Avatar answered Sep 29 '22 11:09

JazzCat