ReactJS: e.preventDefault() is not a function

You need to pass the event object to handleDelete function when you make use of Arrow function as done in your implementation.

You can think of an arrow function like a function that calls another function to which you need to pass the arguments. Event object is a parameter to the arrow function and you indeed need to pass this on to the handleDelete function

onClick={(e) => this.handleDelete(e, i)}

However after this change you still need to bind the deleteTodos function in the parent, since the context of this inside this function won't be that of the React class component, you can do it like

deleteTodos = (i) =>  {
   var lists = this.state.listArr;
   lists.splice(i, 1);
   this.setState({listArr: lists})
 }

or

constructor(props){
    super(props);
    this.state = {
       listArr: [],
    }
    this.deleteTodos = this.deleteTodos.bind(this);
  }

I change e.preventDefault() => e.preventDefault and bind the function.

Example

export default class App extends React.Component {
 constructor(props) {
   super(props)
   this.state = {
    listArr: [],
   }

  this.deleteTodos = this.deleteTodos.bind(this)

  }
  handleDelete(e, i) {
        e.preventDefault;
        this.props.passDeleteTodos()
        ...
    }

   render() {
    return(
      <div>
       {
        this.props.listArr.map((list,i) => {
           return(
             <div key={i} index={i} ref="text">
              <li>{list}
                <div style={{float: 'right'}}>
                 <button className="btn btn-danger btn-xs glyphicon glyphicon-trash"
                         onClick={(e,i) => this.handleDelete(e,i)}
                 />
                </div>
            </div>
       )}
      }
      </div>