Clicking on one of the two buttons displays the name. How to make the active button change its color and text height until another button is pressed? I thought to do it through: active (CSS), but it only works when clicked and immediately the style becomes the same.

import React, { Component } from 'react'; class trueName extends Component { constructor(props) { this.state = { name: {}, }; } editName = (names)=>{ this.setState({name:names}); } render() { return( <div > <div className="SelectName"> <span>{this.state.name}</span> </div> <button onClick={ () => this.editName(John)}> <span>My name John</span> </button> <button onClick={ () => this.editName(Donald)} > <span>My name Donald</span> </button> </div> )}}

export default trueName;

  • You would be helped by one google request "reactjs add active class", it was found - stackoverflow.com/questions/38980051/… ) [but the trial by the given code, on pure JS, it would not be more difficult to repeat]

1 answer 1

Whether it was easier, in state to specify the name class.

 constructor(props) { this.state = { name: {}, defaultClass: "SelectName" };

Use not

  <div className="SelectName">

but

  <div className={this.state.defaultClass}>

Then with onClick you can easily replace this className