How do Is stop React App from resetting everything after submit form

I am trying to build a simple todo app but when I click submit on input for the form the page refreshes and all the data from the input is erased or lost, I am not sure.

console logs appear for a split second then they disappear after refresh. the array with list of todo seems to get filled with input but after refresh it disappears; or at least that is my understanding.

import React from "react"
import './App.css'
import TodoList from './components/TodoList.js'


class App extends React.Component {
  state = {
    count:0
  }

  increment = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  decrement = () => {
    this.setState({
      count: this.state.count -1
    })
  }

  render(){
    return(
      <div className="App">
      <TodoList/> 
      
      </div>
    )
  }
}

export default App

import React from "react"
import TodoForm from "./TodoForm"

export default class TodoList extends React.Component {

    state = {
        todos: []
    };

    addTodo = (todo) => {
        this.setState({
            todos: [todo]
        });

    };

    render() {
        return (
        <div>
        <TodoForm onSubmit={this.addTodo}/>
        {JSON.stringify(this.state.todos)}



        </div>
        );
    }
}


import React from "react"
import shortid from "shortid"

class TodoForm extends React.Component {

    state = {
        text: ""
    }

    handleChange = (event) =>{
        this.setState({
            [event.target.name]: event.target.value
        })

    }

    handleSubmit = (event) => {
        event.preventDefualt() 
        this.props.onSubmit({
            id: shortid.generate(),
            text: this.state.text,
            complete: false   
        })
        
        
    }
    

    render() {
        return (
        <div>
        <form onSubmit={this.handleSubmit} >
            <input
            name="text" 
            value={this.state.text} 
            placeholder="todo..." 
            onChange={this.handleChange}
            />
        </form>
        </div>
        )
    }
}

export default TodoForm

86 thoughts on “How do Is stop React App from resetting everything after submit form”