React: How to filter array onClick then setState the unselected buttons

Question

I have 5 different buttons, what I wanted to do is when a certain button is clicked, for example button 1 then state one will return true however buttons two, three, four and five will return false. What i wanted to achieve is to replace the className of buttons when a certain button is clicked.

Now on my code, when button is clicked, the value I'm passing will setState to true. Then will filter the data array and set the return to false.

import React from 'react'

var data = ["One", "Two", "three", "four", "five"]

export default React.createClass({
  getInitialState(){
    return{
      one: false,
      two: false,
      three: false,
      four: false,
      five: false
    }
  },

  onButtonClick(name){
    var filter = data.filter((item) => {return item != name})

    var obj = {}
    obj[name] = true
    this.setState(obj)
      console.log(filter)
      // can I setState the unclicked buttons from var filter?
  },

  render(){
    return(
      <div>
          <button id="one" onClick={this.onButtonClick.bind(this, "one")} className={!this.state.one ? "btn btn-block btn-default" : "btn btn-block btn-info"}>one</button>
          <button id="two" onClick={this.onButtonClick.bind(this, "two")} className={!this.state.two ? "btn btn-block btn-default" : "btn btn-block btn-info"}>two</button>
          <button id="three" onClick={this.onButtonClick.bind(this, "three")} className={!this.state.three ? "btn btn-block btn-default" : "btn btn-block btn-info"}>three</button>
          <button id="four" onClick={this.onButtonClick.bind(this, "four")} className={!this.state.four ? "btn btn-block btn-default" : "btn btn-block btn-info"}>four</button>
          <button id="five" onClick={this.onButtonClick.bind(this, "five")} className={!this.state.five ? "btn btn-block btn-default" : "btn btn-block btn-info"}>five</button>
      </div>
    )
  }
})

Thanks :D

Mμ. · Accepted Answer · 2017-06-22 02:06:40Z

Instead of using 5 states, why don't you just use one and apply the style if the state. You can also do it programmatically using map, based on your data variable. See worked example below:

var data = ["one", "two", "three", "four", "five"]

var MyKlass = React.createClass({
  getInitialState(){
    return{
      activeButton: ''
    }
  },

  onButtonClick(name){
    this.setState({
      activeButton: name
    })
  },

  render(){
    console.log(this.state.activeButton)
    
    const buttons = data.map(d => 
      <button id={d} onClick={this.onButtonClick.bind(this, d)} className={this.state.activeButton === d ? "btn btn-block btn-default" : "btn btn-block btn-info"}>{d}</button>
    )
    
    return(
      <div>
          {buttons}
      </div>
    )
  }
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

kcNeko · Accepted Answer · 2017-06-22 02:00:55Z

0

I'm just over thinking stuffs and What i did is set all states to false then set the specific button I clicked true. So its something like this

this.setState({
      one: false,
      two: false,
      three: false,
      four: false,
      five: false
    },() => {
      this.setState(obj)  
    })

answered Jun 22, 2017 at 2:00

kcNeko

6091 gold badge9 silver badges23 bronze badges

1 Comment

Mμ. Over a year ago

If you want a more concise solution, have a look at mine

Collectives™ on Stack Overflow

React: How to filter array onClick then setState the unselected buttons

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related