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?
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.
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.
controlId: It is used to set the id on <FormControl> and htmlFor on <FormGroup. Label> component.
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Update the npm-package those components are new in react-bootstrap.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With