title: React - only one "active" child component at any one time
body: <p>I have a parent component that holds a number of children components. I want to add an <code>active</code> className to a a child component when it is clicked on.</p>
  
  <p>This is working, but the issue is that each child component can have an <code>active</code> classname. Only one of the components should have be <code>active</code> each time.</p>
  
  <p>Does anyone have any idea how to solve this issue?</p>
  
  <p>Please see my code below.</p>
  
  <pre><code>class MyComponent extends Component {
  
      constructor(props) {
          super(props);
          this.addActiveClass= this.addActiveClass.bind(this);
  
          this.state = {
              active: false,
          };
      }
  
      addActiveClass() {
          const currentState = this.state.active;
          this.setState({ active: !currentState });
      };
  
      render() {
          return (
              &lt;div 
                  className={this.state.active ? 'active': null} 
                  onclick={this.addActiveClass} 
              &gt;
                  &lt;p&gt;{this.props.text}&lt;/p&gt;
              &lt;/div&gt;
          )
    }
  }
  
  class Test extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;MyComponent text={'1'} /&gt;
                  &lt;MyComponent text={'2'} /&gt;
                  &lt;MyComponent text={'3'} /&gt;
                  &lt;MyComponent text={'4'} /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>