CODEWITHSUNDEEP
reactjsfilterreact-bootstrap
Ntel
Ntel

Reputation: 15

React js filter selections

I'm new to react. I figured out how to make buttongroup act like multiselect, but I cannot figure out how to do that if at least one filter is selected, “All” would be unselected and if “All” is clicked, all filters are unselected, “All” then would be selected?

Here's what i currently have: https://jsbin.com/xiwuyemeva/edit?js,console,output

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')}>
          All
        </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'));

Any ideas or guidelines how i could handle those events would be really appreciated

Upvotes: 0

Views: 215

Answers (1)

Ashish Patel
Ashish Patel

Reputation: 633

if I understood you, you wanted only one button style would be primary. every other will be default. then here is the normal solution i have provided.

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

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

  toggleOption(e) {
    const key = e.target.value;
    let selected = JSON.parse(JSON.stringify(this.state.selected))
    if (key == 'A' && !selected.A) {
       selected.B = selected.C = false    
    }else if (key != 'A') {
      selected.A = false
    }
    selected[key] = !selected[key]
    this.setState({selected})
  }

  render() {
    const {selected} = this.state
    return (
      <ButtonGroup>
        <Button onClick={this.toggleOption} value='A' bsStyle={selected.A ? 'primary' : 'default'}>
          All
        </Button>
        <Button onClick={this.toggleOption} value='B' bsStyle={selected.B ? 'primary' : 'default'}>
          Option B
        </Button>
        <Button onClick={this.toggleOption} value='C' bsStyle={selected.C ? 'primary' : 'default'}>
          Option C
        </Button>
      </ButtonGroup>
      );
  }
}

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

Demo : https://jsbin.com/topuwocosa/edit?js,console,output

Upvotes: 1

Related Questions