title: react add class to child component
body: <p>React newb here. Attempting to set className on (dynamically created but static in example) child element(s). Click on child and parent receives event and changes child's styles accordingly. Trivial in vanilla.js but want to know the "react way".</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
  class App extends Component {   
    constructor(props) {
          super(props);
          this.state = { sel : "none"};
          this.handleChildClick = this.handleChildClick.bind(this);
      }
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
              {this.state.sel}
              &lt;div&gt;
                  &lt;ChildClass onClick={this.handleChildClick}/&gt;
              &lt;/div&gt;      
          &lt;/header&gt;
        &lt;/div&gt;
      );
    }
    handleChildClick = (event) =&gt; {
      // console.log(event);
      // want to change background color of child by adding className
      this.setState({
          sel : event.target.innerHTML
      })  
    }
  }
  class ChildClass extends Component {
      constructor(props) {
          super(props);
      }
      render() {
          return (
              &lt;div onClick={this.props.onClick}&gt;
                  div or li or button
              &lt;/div&gt;
          )
      }
  }
  export default App;
  </code></pre>
  
  <p>-------- EDIT ----</p>
  
  <h2>Simple javascript version - looking for pure react way</h2>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  div {
      border: 1px solid black;
      display: inline-block;
      margin-right: 10px;
      padding: 2px 4px;
  }
  .selected {
      background-color: #09f;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="d_1" class='clk'&gt;one&lt;/div&gt;
  &lt;div id="d_2" class='clk'&gt;two&lt;/div&gt;
  &lt;div id="d_3" class='clk'&gt;three&lt;/div&gt;
  
  &lt;script&gt;
  let ele = document.querySelectorAll('.clk');
  ele.forEach(function(e,v,t) {
      e.onclick = setThis;
  });
  var sel = '';
  function setThis(e) {
      if(sel.length &gt; 0) {
          document.getElementById(sel).classList.remove('selected');
      }
      document.getElementById(e.target.id).classList.add('selected');
      sel = e.target.id;
  }
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>