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