title: How to dynamically add and remove class on click with React?
body: <p>I have a list of links.</p>
  
  <p>I'm adding a class on click, called "is-active". At the same time, I would like to remove all the existing "is-active"s except for on the link I clicked on. There may only be one element with the class "is-active" as that will 'live' page. (Using bulma css)</p>
  
  <p>Here's the code I've tried so far. It's adding classes but not removing them.</p>
  
  <pre><code>class Menu extends Component {
  
      constructor(props) {
          super(props);
          this.state = {addClass: false}
      };
  
      handleClick(e) {
          if(e.target.class === 'is-active'){
              e.target.className = '';
              console.log('remove')
          }else{
              e.target.className = 'is-active';
              console.log('add class')
          }
      }  
  
      render() {
          &lt;ul className="menu-list"&gt;
              { this.props.getList.map(list =&gt;
                  &lt;Link onClick={this.handleClick.bind(this)} key={list.id} to=""&gt;{list.title}&lt;/Link&gt;                    
              )}
          &lt;/ul&gt;
      }
  
  }
  
  export default SideMenu;
  </code></pre>
  
  <p>Advice would be sooo much appreciated.</p>