Unexpected token, expected "," in JSX : <p>I am currently a student working on a react app, and keep getting returned syntax errors for unexpected tokens in my onSubmit() function. It wants commas instead of closing curly brackets, and I do not understand why.  I add commas, swap out curly brackets for commas, then do it all over again to no avail.  Any ideas where I might be making a mistake?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
import axios from 'axios';
import Info from './Info';


export default class Search extends React.Component{
  state = {
    ingredientName: '',
  };

  change = e =&gt; {
    this.setState({
      [e.target.name] : e.target.value,
    });
  };

  onSubmit() {
    e.preventDefault();
    const userInput = JSON.stringify(this.state);
      axios.get(`https://www.recipepuppy.com/api/?i=${this.state}`).then((res) =&gt; {
        console.log(res.data),
      }
  };


};


  render(){
    return (
      &lt;div&gt;
      &lt;form&gt;
      &lt;input name="ingredientName" placeholder="chicken, rice, tomatoes, etc" value={this.state.ingredientName} onChange={e =&gt; this.change(e)}/&gt;
      &lt;button onClick={e =&gt; this.onSubmit(e)}&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
      &lt;/div&gt;
    )
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>
