I'm having trouble with Collapse. The click handler is working, but the extra area is only being (un)collapsed after the next rewrite of the parent component. That's bad news in two ways
- there is no animation at the time of click
- a child component is getting redrawn when there is no change to its props by the parent (as you can see the
extra
value is private to this class).
After searching, I can't find this question before. How do I get the collapse to tie into the Button click.
import { Grid, Row, Col, Input, Button, Collapse } from 'react-bootstrap';
import styles from './styles';
export class Entry extends Component {
constructor(props) {
super(props);
this.extra = false; // alternative that also did not work
this.settings = {extra:false};
}
render() {
const { entryData } = this.props;
return (
<div className={styles}>
<h3 className="orgname">{entryData.orgName}</h3>
<Button bsSize="xsmall" onClick={this.close}>X</Button>
<Button onClick={ () => {this.settings.extra = !this.settings.extra; console.log("click", this.settings.extra) } } >
more...
</Button>
<Collapse in={this.settings.extra}>
<div>
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.
</div>
</Collapse>
</div>
);
}
}