React Filter buttons

by Shawn Wood

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="app"></div>

CSS

/* Bootstrap style override */
.btn-group-filter {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    background-color: #f4f4f4;
    border: 1px #e3e3e3 solid;
    border-radius: 0.25rem;
}



.btn-group-filter > .btn:first-child:not(:last-child):not(.dropdown-toggle).active {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.btn-group-filter > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0.25em;
}


.btn-group-filter > .btn:not(:first-child)::before{
  content: " ";
  display: inline-flex;
  border-left: 1px #ccc solid;
  height: 14px;
  line-height:10px;
  padding-top: 10px;
  top: 20px;
  z-index: -1;
  padding-left: 15px;
  margin-left: -15px;
}



.btn-filter:active, .btn-filter.active, .show > .btn-filter.dropdown-toggle {
    background-color: #0069d9;
    background-image: none;
    border-color: #0062cc;
    color: #000;
}

.btn:active, .btn.active {
    background-image: none;
}

.btn-filter {
  color: #000;
  background-color: transparent;
  border-color: none;
}

.btn-filter:hover {
  color: #000;
  background-color: #fff;
  border-color: #ccc;
}

.btn-filter:focus, .btn-filter.focus {
  color: #000;
  background-color: #0069d9;
  border-color: #0062cc;
  box-shadow: 0 0 0 0.2rem rgba(204, 204, 204, 0.5);
}

.btn-filter.disabled, .btn-filter:disabled {
  color: #000;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-filter:not(:disabled):not(.disabled):active, .btn-filter:not(:disabled):not(.disabled).active,
.show > .btn-filter.dropdown-toggle {
  color: #000;
  background-color: #fff;
  border-color: #ccc;
  border-radius: 0.25rem;
}

.btn-filter:not(:disabled):not(.disabled):active:focus, .btn-filter:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(204, 204, 204, 0.25);
}

React

class ButtonApp extends React.Component {
  constructor(props) {
    super(props)
    
    this.myButtons = {
    	buttons: [
      	{ text: "Knives", active: true },
        { text: "Forks", active: false },
        { text: "Spoons", active: false }
      ]
    }
  }
  
  render() {
    return (
      <div>        
        <h4>Table Filters</h4>
        <div class="btn-group btn-group-filter btn-group-toggle" role="group" data-toggle="buttons">
        {this.myButtons.buttons.map(item => (
          <label class={item.done ? "btn btn-filter active" : "btn btn-filter"} key={item.id}>
          <input type="radio" name="options" id="option" autocomplete="off"  checked={item.active} /> {item.text}
        </label> 
        ))}
        
        </div>
      </div>
    )
  }
}

ReactDOM.render(<ButtonApp />, document.querySelector("#app"))

var getSelected = function(){
let thisId = $('.toggle_radio input[type="radio"]:checked').attr('id'),
      thisValue = $('label[for="' + thisId + '"]').attr('data-value');
    $('.toggle_option_slider').html(thisValue);
}