Items not getting added added in my todo app

1

i have tried out to make an my to app using React(note the delete items are not there) ? i have got problem in added items ,when i use submit button the item is not getting added ,below is the code i have tried

import React, { Component } from 'react';

class Xtreme extends Component {

    constructor(props) {

        super(props);

      this.state= ({

        userInput:"",

        todos:[  ]

      });

      this.handleSubmit = this.handleSubmit.bind(this);

      this.handleChange = this.handleChange.bind(this);

    }

   

    handleSubmit() {

      const itemsArray = this.state.userInput.split(',');

      this.setState({

        todos: itemsArray

      });

    }

    handleChange = (e) => {

      this.setState({

        userInput: e.target.value

      });

    }

   render(){

    const textAreaStyles = {

      width: 235,

      margin: 5

    };

      const myToDoList = this.state.todos

      .map(i=>

        <li>{i}</li>

      )

     return (

      <div>

      <form onSubmit={this.handleSubmit}>

        <textarea style={textAreaStyles} value={this.userInput}

        onChange={this.handleChange} >

        </textarea>

        <button type="text">add</button>

      </form>

      <ul>{myToDoList}</ul>

      </div>

    ); 

   }

  }

export default Xtreme;
2

You have to use preventDefault on form submit otherwise the page will refresh.

handleSubmit(e) {
  e.preventDefault();
  const itemsArray = this.state.userInput.split(",");

  this.setState({
    todos: itemsArray
  });
}