CODEWITHSUNDEEP
reactjs
Gregori Roberts
Gregori Roberts

Reputation: 309

Add a class for the active button ReactJS

When you click on a button, you should change its class. When I click on one of the buttons, the class changes for both. I need the class to be added only to the active button, and if I click on another, then the first button will have the class disappear and the second will appear. Where is the error?

import React, { Component } from 'react';


class trueName extends Component {
  constructor(props) {
    this.state = {
      name: {},
    };
  }

  editName = (names)=>{
    this.setState({name:names});
  }

  someFunct(name) {
    this.setState({ active: name })
}

render() {
  const {name}=this.state;
    return(
      <div >
        <div className="SelectName">
          <span>{this.state.name}</span>
        </div>

        <button
        className={this.state.active === name ? 'active' : ''}
        onClick={ () => {this.editName(John);this.someFunct(name)}}
        key ='1'>
          <span>My name John</span>
        </button>

        <button
        className={this.state.active === name ? 'active' : ''}
        onClick={ () => {this.editName(Donald);this.someFunct(name)}}
        key ='2'
        >
          <span>My name Donald</span>
        </button>
      </div>

    )
  }
}
export default trueName;

Upvotes: 1

Views: 176

Answers (1)

ccnrbrn
ccnrbrn

Reputation: 136

You are setting state.name and then setting state.active to the same value, so this.state.active === this.state.name is always true and the active class gets applied.

This might help:

constructor(props) {
    super(props)
    this.state = {
        name: null
    }
}

editName = name => {
    this.setState({ name: name })
}

render() {
    const { name } = this.state
    return (
        <div>
            <div className="SelectName">
                <span>
                    <pre>{name}</pre>
                </span>
            </div>

            <button
                className={name === "John" ? "active" : ""}
                onClick={() => {
                    this.editName("John")
                }}
            >
                <span>My name John</span>
            </button>

            <button
                className={name === "Donald" ? "active" : ""}
                onClick={() => {
                    this.editName("Donald")
                }}
            >
                <span>My name Donald</span>
            </button>
        </div>
    )
}

Upvotes: 1

Related Questions