title: "TypeError: Cannot read property 'preventDefault' of undefined" in react js
body: <p>I'm new to react and js in general and i'm following a crash course on react on got stuck on this error at some point of the course
  I get this error on chrome when i open <a href="http://localhost:3000/" rel="nofollow noreferrer">http://localhost:3000/</a> even when in the console it says "compiled successfully".
  i looked arround other topics on the site but none answerd my question</p>
  
  <p>Here is the 2 files concerned</p>
  
  <p>AddTodo.js </p>
  
  <pre><code>export class AddTodo extends Component {  
      onSubmit = (e) =&gt; {
        e.preventDefault();
        this.props.addTodo(this.state.title);
        this.setState({ title: '' });
      }
    render() {
      return (
        &lt;form  style = {{display:'flex'}} onSubmit={this.onSubmit()} &gt;
            &lt;input type="text" name='title' style = {{flex:'10' , padding:'5px'}} placeHolder="Ajouter une Tâche..." value={this.state.value} onChange={this.onChange}/&gt; 
            &lt;input type = "submit" value="Ajouter" className="btn" style = {{flex:'1'}} /&gt;
        &lt;/form&gt;
      )}
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>addTodo = (title) =&gt; {const newTodo = {id : 5,title,completed : false,}
  render() {
  return (
    &lt;div className="App"&gt;
      &lt;div className="container"&gt;
        &lt;Header /&gt;
        &lt;AddTodo addTodo ={this.addTodo}/&gt;
        &lt;Todos todos={this.state.todos} markComplete={this.markComplete} delTodo={this.delTodo} /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>}</p>