[Solved] How locally managing component’s state in React/Redux

by


First of all, that’s not the way how to ask a good question. You need to show us some code, what did you try, where is the problem.

Check here how to ask good question.

The solution for your problem would be to store the index of the clicked button in your local state and then check inside rendering your buttons if the index is the same as the index in the state.

You can do something like this : 

let buttons = ['Button 1', 'Button 2', "Button 3"]


class Test extends React.Component {
  constructor(){
    this.state = {
        active: null
    }
  }

  handleClick(i,event){
    this.setState({
        active: i
    })
  }

   render(){
    return (
        <div>
            {this.props.buttons.map((button, i) => {
               return (
                  <div key={i}><button className={this.state.active === i ? 'active' : ''} onClick={this.handleClick.bind(this, i)}>{button}</button></div>
               );
            })}
      </div>
    )
  }
}

React.render(<Test buttons={buttons}/>, document.getElementById('container'));

Here is the fiddle.

1

solved How locally managing component’s state in React/Redux