CODEWITHSUNDEEP
react-bootstrapbootstrap5-modal
ravi
ravi

Reputation: 1

Open form in collapse window

Want to open new window after click on collapse area Below is my code

function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-collapse-text"
        aria-expanded={open}
      >
        Click Me
      </Button>
      <Collapse in={open}>
        <div id="example-collapse-text">
          <InformationForm/>
        </div>
      </Collapse>
    </>
  );
}

And below is my form code, want to open Below form after click on Click me button,

function InformationForm() {
  return (
    <Form>
      <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Check me out" />
      </Form.Group>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
}

export default InformationForm;

After add below code, no form is open, am using react-bootstrap forms

Upvotes: 0

Views: 64

Answers (1)

the_coding_cowboy
the_coding_cowboy

Reputation: 33

Running the code above should display a button. Only after clicking the button will the collapse open.

Upvotes: 0

Related Questions