React Help with todo list


#1

Hi

This is from youtube

Please could someone help.

I can’t see what i’ve done differently, but when i click on the listitem nothing happens, then when i enter a new list item it refreshes?and all disappears

import React, { Component } from 'react'
import './App.css';

import TodoItem from './TodoItem';

class App extends Component {

 constructor(props){
  super(props)

  this.state={
    items:[]
  };

this.addItems=this.addItems.bind(this);
this.deleteItem = this.deleteItem.bind(this)


 }

 addItems(e){
  if(this._inputElement !==""){
      let newItem={
        text:this._inputElement.value,
        key:Date.now()
      };

      this.setState((prevState)=>{
          return {
            items:prevState.items.concat(newItem)
          }

      })



  }
this._inputElement.value ="";

e.preventDefault();


 }

 deleteItem(key)
 {
  console.log('key is'+key)
  console.log('itesm as'+this.state.items)
 var filteredItems=this.state.items.filter(function(item){
    return (item.key !== key)

  })

  this.setState=({ 
    items:filteredItems

  });
 }

 render() {

return (

    <div className='app'>

      <h2> things to do</h2>
        <div className = 'form-inline'>
          <div className="header">
            <form onSubmit={this.addItems}>
              <input ref={(a)=>this._inputElement = a}
               placeholder='enter task'/>
              
              
              <button type="submit">add</button>
              </form>

        </div>

      </div>
      <TodoItem entries = {this.state.items} 
                delete = {this.deleteItem}/>
    </div>
    )
  }
}
export default App

import React, { Component } from 'react';

//search bar
class TodoItem extends Component {

constructor(props){
super(props);
this.createTasks=this.createTasks.bind(this)

}


createTasks(item){
	return <li onClick={() => this.delete(item.key)} 
			   key={item.key}>{item.text}</li>


}

delete(key){
console.log('key is ' +key)
this.props.delete(key)
}

render(){

	let todoEntries = this.props.entries;
	let listItems = todoEntries.map(this.createTasks);

	return (
		<ul className="theList">
			{listItems}

		</ul>



	)
}



}


export default TodoItem

#2

Do you see any errors in the Console in your Developer Tools?


#3

is it because the delete function isn’t bound in the constructor?