Reactstrap formfeedback not displaying

Question

Im using Reactstrap v8.0.1 and I'm trying to display the error message and also render the field with a red border, but it doesn't seem to be working at all

The following is the code that I'm using to render the form ... But nothing.

<Col lg="5">
    <Card className="bg-secondary shadow border-0">
        <CardBody className="px-lg-5 py-lg-5">
            <Form role="form">
                <FormGroup className="mb-3">
                    <InputGroup className="input-group-alternative">
                        <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                                <i className="ni ni-email-83" />
                            </InputGroupText>
                        </InputGroupAddon>

                        <Input placeholder="Email" type="email" name="emailAddress" invalid />
                    </InputGroup>
                    <FormFeedback>This bollocks is not showing!!!!</FormFeedback>
                </FormGroup>

                <div className="text-center">
                    <Button className="my-4" color="primary" type="button">Submit</Button>
                </div>
            </Form>
        </CardBody>
    </Card>
</Col>

Has anyone had any trouble displaying the form feedback that could help?

Answer 1

The FormFeedback block must be in the same parent as the Input block in order to work, also it would be a better practice to flag it that it should be shown when the input is invalid by adding that attribute to it, like:

<Col lg="5">
    <Card className="bg-secondary shadow border-0">
        <CardBody className="px-lg-5 py-lg-5">
            <Form role="form">
                <FormGroup className="mb-3">
                    <InputGroup className="input-group-alternative">
                        <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                                <i className="ni ni-email-83" />
                            </InputGroupText>
                        </InputGroupAddon>

                        <Input 
                              placeholder="Email" 
                              type="email" 
                              name="emailAddress" 
                              invalid={type invalid condition here!} />
                        <FormFeedback invalid>This bollocks is not showing!!!!</FormFeedback>
                    </InputGroup>                    
                </FormGroup>

                <div className="text-center">
                    <Button className="my-4" color="primary" type="button">Submit</Button>
                </div>
            </Form>
        </CardBody>
    </Card>
</Col>

Answer 2

You need to move the "FormFeedback" inside the "InputGroup", then it will work.