title: Stop input from re-rendering onChange
body: <p>I am capturing the input value as a state and on button submit I want to add the result into an array.</p>
  
  <p>The problem I am having is every time I type in a character in the input field it creates a new array before I even hit the submit button.</p>
  
  <p>Following is the screenshot of the weird behaviour.</p>
  
  <p><a href="https://i.stack.imgur.com/BLXav.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BLXav.png" alt="enter image description here"></a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React, { Component } from "react";
  import autoBind from "react-autobind";
  
  let fixtures = [];
  
  const submitFixture = (homeTeam, awayTeam) =&gt; {
    fixtures.push({
      homeTeam: homeTeam,
      awayTeam: awayTeam
    });
  };
  class CreateFixture extends Component {
    constructor(props) {
      super(props);
      autoBind(this);
  
      this.state = {
        homeTeam: "",
        awayTeam: ""
      };
    }
  
    render() {
      const { homeTeam, awayTeam } = this.state;
  
  return (
    &lt;React.Fragment&gt;
      &lt;p&gt;Home Team&lt;/p&gt;
      &lt;input
        value={homeTeam}
        onChange={e =&gt; {
          this.setState({ homeTeam: e.target.value });
        }}
      /&gt;
      &lt;p&gt;Away Team&lt;/p&gt;
      &lt;input
        value={awayTeam}
        onChange={e =&gt; {
          this.setState({ awayTeam: e.target.value });
        }}
      /&gt;
      &lt;button onClick={submitFixture(homeTeam, awayTeam)}&gt;
        Create fixture
      &lt;/button&gt;
      {console.log(fixtures)}
    &lt;/React.Fragment&gt;
  );
    }
  }
  
  export default CreateFixture;
  </code></pre>