CODEWITHSUNDEEP
javascriptreactjs
kcNeko
kcNeko

Reputation: 609

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

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

Upvotes: 0

Views: 3263

Answers (2)

Mμ.
Mμ.

Reputation: 8542

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>

Upvotes: 3

kcNeko
kcNeko

Reputation: 609

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)  
    })

Upvotes: 0

Related Questions