title: How to implement search bar button and result components in react
body: <p>I have already seen other answers which are alike, but since I am a beginner, I tried implementing them and I got so confused that nothing worked for me. Here is the problem:</p>
  
  <p>I have a search bar (Searchbar component) which is supposed to have a submit button. When the button is clicked, the search results are supposed to appear in Viewer component. I don't know how to connect event from Searchbar in Viewer. How to tell one component that something changed in the other one? I want two siblings to communicate that</p>
  
  <pre><code>import React from 'react';
  
  var Searchbar = React.createClass({
    getInitialState: function () {
      return {};
    },
  
  handleSubmit: function (e) {
  e.preventDefault();
  // what to do here
  },
  render: function () {
  return (
    &lt;form onSubmit={this.handleSubmit}&gt;
      &lt;h3&gt;I'm looking for:&lt;/h3&gt;
      &lt;input ref="srch" type="search" id="search" placeholder="Search..." /&gt;
      &lt;button&gt;Go&lt;/button&gt;
      &lt;hr /&gt;
    &lt;/
  });
  
  export default Searchbar;
  </code></pre>
  
  <p>now for the result component:</p>
  
  <pre><code>var Result = React.createClass({
  
  render() {
      return (
          &lt;div&gt;
              &lt;hr /&gt;
              &lt;h2&gt;Result here&lt;/h2&gt;
              &lt;h2&gt;{this.props.result.drug_name}&lt;/h2&gt;        
              &lt;span&gt;{this.props.result.description}&lt;/span&gt;
              &lt;img src={this.props.result.image} /&gt;
          &lt;/div&gt;
      )
  }
  export default Result;
  </code></pre>
  
  <p>They are both contained in the src folder and rendered in App.js as</p>
  
  <pre><code>    var App = React.createClass({
  render: function () {
      return (
        &lt;div&gt;
          &lt;Searchbar /&gt;
          &lt;Viewer /&gt;
        &lt;/div&gt;
      )
    } 
  });
  </code></pre>