Structuring React Components with API calls, user inputs, etc

I'm having trouble implementing what I want in React.

I've found some examples and gone through part 1 of the Codecademy React tutorial. So, I understand props and state on some level, but I'm finding it hard to apply to my specific use case.

I have a Python Flask API that I'd like to make calls to. I'm going to use basic XMLHttpRequests like this:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        callback(xhr.responseText)
        }

param1 = encodeURIComponent(document.getElementById("param1").value);
param2 = encodeURIComponent(document.getElementById("param2").value);
xhr.open("GET", "/apicall?param1="+param1+"&param2="+param2", true);
xhr.send(null);

My Flask API can handle this and perform some calculations based on the parameters and return a JSON object with the results i.e.:

{
 result1: 100,
 result2: 150
}

My basic page structure right now is an input section and a results section. The input section has two buttons at the bottom. Button 1 is to calculate and display the results (should make the API call and cause the results section to become visible if the input data is valid and the API call returns a valid result). Button 2 is to clear (should clear and hide the results section, and clear the input values from their boxes in the input section).

The results section also has a button at the bottom, to display additional results that will require another API call (using parameters from both the input section and the results section).

This project started out using html templates manipulated with jQuery, so as of now, my React components aren't doing anything "React-y" yet (which is sort of the main thing I'm having trouble with).

Here's some example code of what I have right now:

var Input = React.createClass({

    render () {

        return (
            <div className="input-container">
              <h2>Inputs</h2>
              <h4>Input 1</h4>
              <input className="input-box" name="param1" id="param1"/>
              <input className="input-box" name="param2" id="param2"/>
              <button className="input-btn" id="calculate">Calculate</button>
              <button className="input-btn" id="clear">Clear</button>
            </div>
            );
        }
    });

What I'm thinking is I need to set the button's onClick prop to the API calling function, which I guess should be a method inside the Input class?

My Results section is something like this:

var Results = React.createClass({

    render () {

    return (
        <div className="results-container" style={display: 'none'}>
          <h2>Results</h2>
          <p>Result 1 is <strong><span id="result1"></span></strong></p>
          <p>Result 2 is <strong><span id="result2"></span></strong></p>
          <button class="btn" id="show-result-plots">Show Results Plots</button>
          <div className="plots-container">
            <div id="plot1"></div>
            <div id="plot2"></div>
          </div>
        </div>
        );
    }
});

So, obviously I need to pass the API data that I'm gonna get from the Input component to the Result component, presumably using props. But it seems like the Result component needs to be a child of the Input component, or they both need a parent that is passing data between them. Less importantly, I also need to update the state of the Result component to become visible when the API call is successful.

I've got most of the pieces but I'm struggling to put them together in the right way.