CODEWITHSUNDEEP
javascriptreactjs
Kamil Wojtczyk
Kamil Wojtczyk

Reputation: 23

Warning: <elementType /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements

I have a problem with React, I've added some Bootstrap form and got the error. I know that there is a lot of the same problems but didn't find solution.

<Card className="mb-3 border-dark">
            <Card.Header as="h5">Personal Informations</Card.Header>
            <Card.Body>
              <Form>
                <Form.Row>
                  <Form.Group as={Col} variant="flush">
                    <Form.Label as="h5">Name</Form.Label>
                    <Form.Control as="elementType">{patient.name}</Form.Control>
                  </Form.Group>

                  <Form.Group as={Col} variant="flush">
                    <Form.Label as="h5">Age</Form.Label>
                    <Form.Control as="elementType">{patient.age}</Form.Control>
                  </Form.Group>

                  <Form.Group as={Col} variant="flush">
                    <Form.Label as="h5">Sex</Form.Label>
                    <Form.Control as="elementType">{patient.sex}</Form.Control>
                  </Form.Group>

                  <Form.Group as={Col} variant="flush">
                    <Form.Label as="h5">Birth</Form.Label>
                    <Form.Control as="elementType">
                      {patient.birth}
                    </Form.Control>
                  </Form.Group>
                </Form.Row>
              </Form>
            </Card.Body>
          </Card>

Upvotes: 0

Views: 3073

Answers (2)

Ross Allen
Ross Allen

Reputation: 44900

You can use the read-only, plaintext version of Form.Control:

  • the value must be supplied as value, not as a child
<Form.Control plaintext readOnly value={patient.name} />>

Upvotes: 1

Seth Lutske
Seth Lutske

Reputation: 10714

The as prop is expecting an element, not a type. If using a standard HTML element, use lowercase. If using a custom react component of your own construction, it expects an uppercase name, as that is what is required by react for it to know its a custom component and not an existing HTML element.

Upvotes: 0

Related Questions