title: React button component onClick() fires on page load, not onclick
body: <p>My onClick isn't firing on click, but rather when the page loads. Here's the relevant code:</p>
  
  <p>App.js </p>
  
  <pre><code>callAPI(x) {
      fetch("http://localhost:8080/" + x)
        .then(res =&gt; res.text())
        .then(res =&gt; this.setState({ apiResponse: res }))
        .catch(err =&gt; err);
    }
  
  render() {
      &lt;Button
         onClick={this.callAPI('api')}
         type="success"
         className="input-lg"&gt;
         Search
      &lt;/Button&gt;
  </code></pre>
  
  <p>Button component:</p>
  
  <pre><code>import React from "react";
  
  function Button({ type = "default", className, children, onClick }) {
    return (
      &lt;button onClick={onClick} className={["btn btn-lg", `btn-${type}`, 
      className].join(" ")}&gt;
        {children}
      &lt;/button&gt;
    );
  }
  
  export default Button;
  </code></pre>
  
  <p>Any help is greatly appreciated!</p>