title: React change state for all elements except for the chosen one
body: <p>I have a bunch of buttons that change style on events such as hover, click etc.</p>
  <p>I want to do a simple operation with onClick event to highlight the pressed button.</p>
  <p>It's doing well but then other buttons need to get rid of the class that highlights them (<code>'light-active'</code> and '<code>sect-active'</code>). These classes don't go away because the state <code>isActive</code> is true as the button was pressed before.</p>
  <p>I can't come up with a solution.
  Here's my code: <strong>(please note that I refer to buttons as 'pages')</strong></p>
  <p><em>App.js</em> - Root</p>
  <pre><code>import React, { Component } from 'react';
  import PageButtons from './components/PageButtons';
  import { v4 as uuidv4 } from 'uuid';
  import PageBody from './components/PageBody';
  
  class App extends Component {
    state = {
      pages: [
        {
          id: uuidv4(),
          title: 'Body',
          active: false,
        },
        {
          id: uuidv4(),
          title: 'Parents',
          active: false,
        },
        {
          id: uuidv4(),
          title: 'Head',
          active: false,
        },
        {
          id: uuidv4(),
          title: 'Face',
          active: false,
        },
        {
          id: uuidv4(),
          title: 'Hair',
          active: false,
        },
        {
          id: uuidv4(),
          title: 'Accessories',
          active: false,
        },
      ],
    };
  
    render() {
      return (
        &lt;div className='App'&gt;
          &lt;div id='container' style={cont}&gt;
            &lt;PageButtons pages={this.state.pages} /&gt;
            &lt;PageBody /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const cont = {
    padding: '1em',
    width: '40vw',
    display: 'grid',
    placeContent: 'center',
  };
  
  export default App;
  </code></pre>
  <p><em>PageButton<strong>s</strong>.js</em> - Parent component for buttons</p>
  <pre><code>import React, { Component } from 'react';
  import PageButton from './PageButton';
  import PropTypes from 'prop-types';
  
  class PageButtons extends Component {
    render() {
      return (
        &lt;div style={pagesStyle}&gt;
          {this.props.pages.map((page) =&gt; (
            &lt;PageButton
              key={page.id}
              page={page}
            /&gt;
          ))}
        &lt;/div&gt;
      );
    }
  }
  
  const pagesStyle = {
    alignSelf: 'end',
    display: 'flex',
    flexWrap: 'nowrap',
    overflowX: 'auto',
    overflowY: 'hidden',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '30vw',
    marginBottom: '1vw',
    cursor: 'pointer',
    padding: '1.3vw',
  };
  
  // PropTypes
  PageButtons.propTypes = {
    pages: PropTypes.array.isRequired,
  };
  
  export default PageButtons;
  </code></pre>
  <p><em>PageButton.js</em> - the buttons</p>
  <pre><code>import React, { Component } from 'react';
  
  class PageButton extends Component {
    state = {
      isHovered: false,
      isActive: false,
    };
  
    handleHover = () =&gt; {
      this.setState({ isHovered: !this.state.isHovered });
    };
  
    handleMouseDown = () =&gt; {
      this.setState({ isActive: !this.state.isActive });
    };
    
  
    render() {
      const isHovered = this.state.isHovered;
      const isActive = this.state.isActive;
      const { id, title } = this.props.page;
      return (
        &lt;div
          id='singlePageBtnStyle'
          className='page'
          onMouseEnter={this.handleHover}
          onMouseLeave={this.handleHover}
          onMouseDown={this.handleMouseDown}
        &gt;
          &lt;div
            className={`light ${
              isHovered ? 'light-2' : [isActive ? 'light-active' : 'light']
            }`}
          &gt;&lt;/div&gt;
          &lt;div
            className={`sect ${
              isHovered ? 'sect-2' : [isActive ? 'sect-active' : 'sect']
            }`}
          &gt;
            &lt;p
              dataText={title}
              style={{ margin: 'auto' }}
              className={`${isHovered ? 'glitch' : ''}`}
            &gt;
              {title}
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default PageButton;
  </code></pre>