CODEWITHSUNDEEP
react-bootstrap
user590747
user590747

Reputation: 345

Is it possible to have a buttongroup act like a multiselect in react-bootstrap?

I'm trying to implement multi select using ButtonGroup like the first example in this link using only react-bootstrap. is it possible? the main goal is to have multi select behaviour using ButtonGroup to use as a filter for objects in a grid.

Upvotes: 3

Views: 1420

Answers (1)

Kunal
Kunal

Reputation: 1256

Sure it's possible. Here's a jsBin showing an example of toggling options (I've used something similar for my own apps).

Broadly speaking you'll need to do two things; 1. manage state of your select options/filters 2. style your buttons according to this state

Here's the code:

const Button = ReactBootstrap.Button;
const ButtonGroup = ReactBootstrap.ButtonGroup;

class Options extends React.Component {
  constructor(props) {
    super(props);
    this.toggleOption = this.toggleOption.bind(this);
    this.getBsStyle = this.getBsStyle.bind(this);
    this.state = {
      selected: {
        A: false,
        B: false,
        C: false,
      }
    }
  }

  toggleOption(e) {
    const key = e.target.value; // e.g. 'A'
    const value = !this.state.selected[key];
    const newSelected = Object.assign(this.state.selected, {[key]: value});
    this.setState({ selected: newSelected });
    console.log('this.state', this.state);
  }

  getBsStyle(key) {
   return this.state.selected[key] ? 'primary' : 'default';
  }

  render() {
    return (
      <ButtonGroup>
        <Button onClick={this.toggleOption} value='A' bsStyle={this.getBsStyle('A')}>
          Option A
        </Button>
        <Button onClick={this.toggleOption} value='B' bsStyle={this.getBsStyle('B')}>
          Option B
        </Button>
        <Button onClick={this.toggleOption} value='C' bsStyle={this.getBsStyle('C')}>
          Option C
        </Button>
      </ButtonGroup>
      );
  }
}

ReactDOM.render(<Options />, document.getElementById('app'));

Upvotes: 4

Related Questions