Why isn't Form.Select recognized in my simple react-bootstrap app, following the react-bootstrap documentation?

user_7273378 0
Viewed 5969

I am a "react-bootstrap with hooks" first-timer and I am creating a simple form. I am following the react-bootstrap documentation's example and I am running into a problem with select/option form elements. Regular text input fields render normally without an error. Select statements seem to blow things up.

Here is my code:

import { Form, Button } from "react-bootstrap";

export default function FormComponentName(props) {
    return (
        <>
            <h1>Search Form</h1>

            <Form>

                <Form.Group className="mb-3" controlId="searchState">
                    <Form.Label>State</Form.Label>
                    <Form.Select defaultValue="State...">
                        <option>State...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </Form.Select>
                </Form.Group>
               <Button variant="primary" type="submit">
                    Search Data
                </Button>

            </Form>


        </>
    )

}

Here is the yarn error message:

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.

Check the render method of `FormComponentName`.

And from the console:

index.js:1 Warning: React.jsx: 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.

Check your code at FormComponentName.js:14.
    at FormComponentName

Do I need to install an additional module, or is it something more obvious?

react-bootstrap bootstrap-4 react-hooks reactjs javascript
5 Answers

Instead of Form.Select, you can use:

<Form.Control as="select">...</Form.Control>
user_34311420

Form.Select appears to be a beta feature that isn't implemented in current the production version of bootstrap-react. That is the reason why the above code wasn't working.

user_72733780

Full code will be look like as defined below

 <Form.Group>
    <Form.Label>Status</Form.Label>
    <Form.Control as="select">
      <option>Active</option>
      <option>Inactive</option>
    </Form.Control>
  </Form.Group>
user_85393850

In order for "submit" to show it as a json you need to provide the "name" parameter. Like this:

import { Form, Button } from "react-bootstrap";

export default function FormComponentName(props) {
    return (
        <>
            <h1>Search Form</h1>

            <Form>

                <Form.Group className="mb-3" controlId="searchState">
                    <Form.Label>State</Form.Label>


//The name of the param will become the key in your json


                    <Form.Select defaultValue="State..." name="myParameter">


                        <option>State...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </Form.Select>
                </Form.Group>
               <Button variant="primary" type="submit">
                    Search Data
                </Button>

            </Form>


        </>
    )

}
user_35858980

Instead of using the following code:

                    <Form.Select className="text-center">
                        <option>Alfie-Lee Powell</option>
                        <option>Amir Conley</option>
                        <option>Barney Hirst</option>
                        <option>Ciaron Robinson</option>
                        <option>Claude Whyte</option>
                        <option>Ismael English</option>
                        <option>Pranav Smith</option>
                        <option>Tamanna Warner</option>
                        <option>Thierry Vaughn</option>
                    </Form.Select>

Use this instead

                    <Form.Control as="select" className="text-center">
                        <option>Alfie-Lee Powell</option>
                        <option>Amir Conley</option>
                        <option>Barney Hirst</option>
                        <option>Ciaron Robinson</option>
                        <option>Claude Whyte</option>
                        <option>Ismael English</option>
                        <option>Pranav Smith</option>
                        <option>Tamanna Warner</option>
                        <option>Thierry Vaughn</option>
                    </Form.Control>

As of 7/21/22 it is still in beta and is prone to error

user_29474150
Related