title: Pass input value to AJAX request in React
body: <p>I am using Github Search API for people to be able to search for repositories on github. I'm using React and am quite new to all of this. 
  I want to pass the input value to the AJAX request so it only requests that repository with the specific name. Is there a way to use React to pass the input value? </p>
  
  <pre><code> class SearchBox extends React.Component {
  
  constructor(props) {
      super(props);
      this.onKeyUp = this.onKeyUp.bind(this);
      this.onChange = this.onChange.bind(this);
  }
  
  
  
  render() {
      return(
          &lt;form&gt;
              &lt;input type="text" className="searchbox" onChange={this.onChange} onKeyUp={this.onKeyUp} /&gt;
                &lt;ul className="suggestions"&gt;
          &lt;li&gt;Filter for a city&lt;/li&gt;
          &lt;li&gt;or a state&lt;/li&gt;
      &lt;/ul&gt;
          &lt;/form&gt;
      );
  }
  
    onChange(event) {
          const matchArray = findMatches(this.value, repositories);
  const html = matchArray.map(place =&gt; {
      const regex = new RegExp(this.value, "gi");
      const cityName = place.city.replace(regex, `&lt;span className="hl"&gt;${this.value}&lt;/span&gt;`);
      const stateName = place.state.replace(regex, `&lt;span className="hl"&gt;${this.value}&lt;/span&gt;`);
      return `
    &lt;li&gt;
    &lt;span className="name"&gt;${cityName}, ${stateName}&lt;/span&gt;
  
    &lt;/li&gt;
    `;
  }).join('');
  console.log(matchArray);
  
  
  }
  
  onKeyUp(event) {
          const matchArray = findMatches(this.value, repositories);
  const html = matchArray.map(place =&gt; {
      const regex = new RegExp(this.value, "gi");
      const cityName = place.name.replace(regex, `&lt;span className="hl"&gt;${this.value}&lt;/span&gt;`);
  
      return `
    &lt;li&gt;
    &lt;span class="nameName"&gt;${cityName}, &lt;/span&gt;
  
    &lt;/li&gt;
    `;
  }).join('');
  console.log(matchArray);
  
  
  }
  }
  
  ReactDOM.render(
  &lt;SearchBox /&gt;,
  document.getElementById("searching")
  );
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>const endpoint = 'https://api.github.com/search/repositories?sort=stars&amp;order=desc&amp;q=' + searchTerm;
  const repositories = [];
  
  fetch(endpoint)
  .then(blob =&gt; blob.json())
  .then(data =&gt; repositories.push(...data));
  
  function findMatches(wordToMatch, repositories) {
  return repositories.filter(place =&gt; {
  
      const regex = new RegExp(wordToMatch, "gi");
      return place.city.match(regex) || place.state.match(regex);
  });
  };
  </code></pre>
  
  <p>So as you can see I want to pass the input value into a variable called searchTerm. </p>