How to implement search bar button and result components in react

Question

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:

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

import React from 'react';

var Searchbar = React.createClass({
  getInitialState: function () {
    return {};
  },

handleSubmit: function (e) {
e.preventDefault();
// what to do here
},
render: function () {
return (
  <form onSubmit={this.handleSubmit}>
    <h3>I'm looking for:</h3>
    <input ref="srch" type="search" id="search" placeholder="Search..." />
    <button>Go</button>
    <hr />
  </
});

export default Searchbar;

now for the result component:

var Result = React.createClass({

render() {
    return (
        <div>
            <hr />
            <h2>Result here</h2>
            <h2>{this.props.result.drug_name}</h2>        
            <span>{this.props.result.description}</span>
            <img src={this.props.result.image} />
        </div>
    )
}
export default Result;

They are both contained in the src folder and rendered in App.js as

    var App = React.createClass({
render: function () {
    return (
      <div>
        <Searchbar />
        <Viewer />
      </div>
    )
  } 
});

Addieaddiego

Answer 1

The basic idea here would be like this. You have your Parent component which renders your search and your viewer. In this component you will have state that will keep track of the user's input as they search, and an array or object that will hold the results of the search. Here is some pseudo code to give you an idea.

 class App extends React.Component {
    constructor() {
        super();
        this.state = {
            searchText: '',
            searchResults: []
        }
    }

    onChange(e) {
        this.setState({searchText: e.target.value});
    }

    getResults() {
        calltodb(searchText).then(e => {
            this.setState({searchResults: e.value})
        });
    }

    render() {
        return (
            <div>
                <SearchBar />
                <SearchResults />
            </div>
        )
    }
}

This is just some example code to give you an idea. Basically, the app component will handle all state and functionality, while the others will deal with visuals only.

Arwood