bier hier bier hier - 23 days ago 20
React JSX Question

How can I get the collapse panel to work?

I am using reactbootstrap and tried to create this codepen to get it working but no luck sofar. This is the panel that is supposed to open and close:

import { Button } from 'react-bootstrap';
import { Panel } from 'react-bootstrap';
import { Fade} from 'react-bootstrap';
import { Collapse } from 'react-bootstrap';
class App extends React.Component {
constructor() {
super();
this.state = {};
}

render() {
return (
<div>
<Button onClick={ ()=> this.setState({ open: !this.state.open })}>
click
</Button>
<Collapse in={this.state.open}>
<div>
<Well>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</Well>
</div>
</Collapse>
</div>
);
}

};


This is the codepen
There are no errors in the console so have no clue what is going on.

Answer

So few mistakes that you did while implementing the codepen.

  1. You need to import bootstrap.min.css and bootstrap.min.js in your html in order to use react-bootstrap

  2. You did not import the Well component

  3. If you are trying to do this in codepen you shouldn't import your components like

    import { Button } from 'react-bootstrap';
    import { Panel } from 'react-bootstrap';
    import { Fade} from 'react-bootstrap';
    import { Collapse } from 'react-bootstrap';
    import {Well} from 'react-bootstrap';
    

instead you should import them like

    var Button = ReactBootstrap.Button;
    var Panel = ReactBootstrap.Panel;
    var Fade = ReactBootstrap.Fade;
    var Collapse = ReactBootstrap.Collapse;
    var Well = ReactBootstrap.Well;

Codepen Demo

Comments