title: Component with form keeps refreshing page in ReactJS
body: <p>I'm attempting at creating a simple todo app to try to cement some concepts. 
  This app gets some previous todos from a .js file with json object. And every time they get clicked they are deleted from the current app. </p>
  
  <p>Now I wanted to add the ability to add todos, first to the current instance of app itself and afterwards to the file to ensure continuity.</p>
  
  <p>My problem arises adding to the app instance. </p>
  
  <p><strong>When using the component with a form, it all goes south.</strong></p>
  
  <p>I tried putting all the component parts in the App.js main file but still the same result, it refreshes after the alert(value) line. </p>
  
  <p>I've also tried changing the order inside the addTodo function and the alert only works if it's the first line of the function, anywhere else the refresh happens before it. So I assumed it's something about using the state of the app component?</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  import todosData from "./todosData"
  import TodoItem from "./TodoItem"
  import TodoForm from './TodoForm'
  class App extends Component {
  
      constructor() {
          super()
          this.state = {
              todos: todosData
          }
      this.handleChange = this.handleChange.bind(this)
    }
  
    handleChange(id) {
          const allTodos = this.state.todos
          const filtered = allTodos.filter(x =&gt; x.id !== id)
          const filtered2 = filtered
          filtered2.push({id:4,text:"HAKUNA MATATA",completed:false   })
          this.setState({todos:filtered2})
          //added testing so that whenever I delete a todo it adds one with "HAKUNA MATATA"
    }
  
      addTodo(value) {
          alert(value)
          const allTodos = this.state.todos
          const lastTodo = this.state.todos.slice(-1)[0]
          const newId = lastTodo.id + 1
          const newTodo = {id: newId, text: value, completed:false}
          allTodos.push(newTodo)
          this.setState({todos:allTodos})
      }
  
    render() {
      const todoItems = this.state.todos.map( item =&gt;
        &lt;TodoItem
          key={item.id}
          item={item}
          handleChange={this.handleChange}
        /&gt;
      )
          const text = ""
      return (
        &lt;div className="todo-list"&gt;
          {todoItems}
                  &lt;TodoForm addTodo={this.addTodo}/&gt;
        &lt;/div&gt;
          );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>TodoForm.js</strong></p>
  
  <pre><code>import React from 'react'
  
  class TodoForm extends React.Component {
    constructor(props) {
      super(props)
      this.handleSubmit = this.handleSubmit.bind(this)
    }
  
    handleSubmit(event) {
      this.props.addTodo(this.input.value)
      event.preventDefault() 
    }
  
    render() {
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;label&gt;
            Name:
          &lt;/label&gt;
            &lt;input type="text" ref={(input) =&gt; this.input = input}/&gt;
  
        &lt;/form&gt;
      )
    }
  }
  
  export default TodoForm
  </code></pre>
  
  <p>Can you guys help me with this? From what I understood preventDefault was supposed to prevent this?</p>