title: Run JSX script on click of HTML button
body: <p>Sorry, this is my first ever question, and I'm probably just dumb and don't understand something easy.
  I have a webpage made in HTML and React there is a text box and button. I am trying to call a JSX function on click of the button.  When you click the button, it is supposed to run some JSX code that will get something from the GitHub API and return it as HTML. That is why I am using JSX and not JavaScript. I found this code on another question and I modified it. I am new to JavaScript and JSX. When I put something in the textbox and click the button, the console logs: <code>myFunction is not defined</code>.
  Is there any way to fix this?
  I have a separate file called index.jsx that has all the code inside. Here it is:</p>
  <pre class="lang-js prettyprint-override"><code>
   /**
   * See https://developer.github.com/v3/repos/branches/#get-branch
   *
   * Example Github api request:
   * https://api.github.com/repos/ta-dachi/eatsleepcode.tech/branches/master
   */
  class LatestCommitComponent extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              author: &quot;&quot;,
              branch: &quot;&quot;,
              date: &quot;&quot;,
              sha: &quot;&quot;,
              link: &quot;&quot;
          };
      }
  
      componentDidMount() {
          // Replace this with your own repo
          // https://api.github.com/repos/:owner/:repo/branches/master
          fetch(
              // This right below is what I am trying to replace from the text box
              &quot;https://api.github.com/repos/datkat21/datkat21.github.io/branches/master&quot;
          )
              .then(response =&gt; {
                  response.json().then(json =&gt; {
                      console.log(json);
                      this.setState({
                          author: json.commit.author.login,
                          authorurl: json.commit.author.url,
                          avatar: json.commit.author.avatar_url,
                          branch: json.name,
                          date: json.commit.commit.author.date,
                          link: json._links.html,
                          authorpage: json.commit.author.html_url,
                          commit_url: json.commit.html_url,
                          commit_title: json.commit.commit.message,
                      });
                  });
              })
              .catch(error =&gt; {
                  console.log(error);
              });
      }
  
      render(){
          return (
              &lt;div&gt;
              // This part shows the response from the GitHub API as HTML shown in the browser
                  &lt;div&gt;{this.state.author}&lt;br&gt;&lt;/br&gt;&lt;a href={this.state.authorpage}&gt;&lt;img src={this.state.avatar} alt=&quot;Loading...&quot; class=&quot;img&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
  
                  &lt;div&gt;&lt;a href={this.state.link}&gt;Branch: {this.state.branch}&lt;/a&gt;&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
  
                  &lt;div&gt;Message: {this.state.commit_title}&lt;/div&gt;
  
                  &lt;div&gt;Date: {this.state.date}&lt;/div&gt;
  
                  
  
                  &lt;div&gt;&lt;/div&gt;
  
              &lt;/div&gt;
          );
      }
  ;}
  
  ReactDOM.render(&lt;LatestCommitComponent /&gt;, document.getElementById(&quot;root&quot;));
  </code></pre>
  <p>Sorry if the code is too long.
  I don't know how to call that file on click of the button. If anyone could help, that would be good!
  Thanks.</p>
  <p>Edit: Here is the HTML code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;title&gt;Begin&lt;/title&gt;
      &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../../css/style.css&quot; /&gt;
      &lt;script type=&quot;text/jsx&quot; src=&quot;../render.jsx&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/jsx&quot; src=&quot;index.jsx&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          function myFunction() {
              var GitUrl = document.getElementsByName(&quot;GitUrl&quot;)[0].value;
              render(); // The function returns the product of p1 and p2
          }
      &lt;/script&gt;
      &lt;script type=&quot;text/jsx&quot; render() { render; return ( &lt;div&gt;
  
          &lt;div&gt;{this.state.author}&lt;br&gt;&lt;/br&gt;&lt;a href={this.state.authorpage}&gt;&lt;img src={this.state.avatar} alt=&quot;Loading...&quot; class=&quot;img&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
          
                      &lt;div&gt;&lt;a href={this.state.link}&gt;Branch: {this.state.branch}&lt;/a&gt;&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
          
                      &lt;div&gt;Message: {this.state.commit_title}&lt;/div&gt;
          
                      &lt;div&gt;Date: {this.state.date}&lt;/div&gt;
          
          
          
                      &lt;div&gt;&lt;/div&gt;
          
                  &lt;/div&gt;
              );
          }
          
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;form action=&quot;begin-create-done.html&quot; method=&quot;get&quot;&gt;
          User/Repo URL:&lt;br&gt;&lt;br&gt; &lt;input type=&quot;text&quot; name=&quot;GitUrl&quot;&gt;
          &lt;br&gt;
  
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;button onclick=&quot;myFunction()&quot;&gt;Get data&lt;/button&gt; &lt;!--button that should run script--&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>Sorry if I'm just dumb and dont understand something. I'm trying to call the script when you click on the button as defined in the HTML code</p>