title: Reactjs to change the state of a component based on child component's class
body: <p>I have been using reactjs now for quite sometime, and so far going really good. However there is one thing i have kind of gotten stuck with. I am trying to change the state of the parent component on click but only if the child component has a certain class, not otherwise.</p>
  
  <p>Let me provide you a sample of the code here:</p>
  
  <p>Parent component:</p>
  
  <pre><code>class Parent extends React.Component{
   constructor(){
      super();
      this.state = {
        pageState: false
      }
    }
  
    changeState(){
      this.setState({pageState: !this.state.pageState});
    }
  
    render(){
      return(
  
        &lt;div id="app"&gt;
          &lt;ul&gt;
            &lt;Child sendState={this.changeState.bind(this)} heading="Home"/&gt;
            &lt;Child sendState={this.changeState.bind(this)} heading="About"/&gt;
            &lt;Child sendState={this.changeState.bind(this)} heading="Contact"/&gt;
            &lt;Child sendState={this.changeState.bind(this)} heading="Work"/&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  
      )
    }
  
  }
  
  render(&lt;Parent/&gt;, document.getElementById("app-wrapper"));
  </code></pre>
  
  <p>Child component</p>
  
  <pre><code>class Child extends React.Component{
  
   render(){
    return(
      &lt;li className="list_element"&gt;
       &lt;div className="card_block" onClick={this.props.sendState.bind(this)}&gt;
        &lt;h2&gt;{this.props.heading}&lt;/h2&gt;
       &lt;/div&gt;
      &lt;li&gt;
    )
   }
  }
  </code></pre>
  
  <p>So basically what i am trying to achieve is, when the card inside the "li" is clicked, the state needs to change, but only if the parent "li" has a 'current' class. So onclick of the card element, check it's class, and if it has "current" class, change the state.</p>
  
  <p>Is there anyway this can be made possible?</p>