Нужно передать данные из компонента Item в компонент App для передачи идентификатора в callback.
Но выдает ошибку "TypeError: Cannot read property 'undel' of undefined" и выдает строку
return <Item key={item.name} id={item.id} name={item.name} undel={this.undel} />
Вот весь листинг
import React, { Component } from 'react';
import './bootstrap.min.css';
class Item extends Component{
constructor(props){
super(props);
this.press = this.press.bind(this);
}
press(){
console.log(this.props.id)
this.props.undel(this.props.id)
}
render(){
return <li className="list-group-item" onClick={this.press}>{this.props.name}</li>
}
}
class Search extends Component{
constructor(props){
super(props);
this.text = "";
this.enterDo = this.enterDo.bind(this);
this.state = {defaultValue: ""}
this.go = this.go.bind(this);
}
enterDo(e){
this.setState({"defaultValue": e.target.value})
}
go(){
this.props.go(this.state.defaultValue);
this.setState({"defaultValue": " "})
}
render(){
return <div className="input-group">
<input className="form-control" type="text" onChange={this.enterDo} value={this.state.defaultValue} />
<span className="input-group-btn">
<button className="btn btn-secondary" type="button" onClick={this.go}>Go</button>
</span>
</div>
}
}
class App extends Component {
constructor(props){
super(props);
this.state = {items:this.props.data.items,id:0};
this.undel = this.undel.bind(this);
this.addItem = this.addItem.bind(this);
}
addItem(text){
var id = this.state.id;
var itemsPush = this.state.items;
itemsPush.push({name:text,id:id});
this.setState({items: itemsPush });
this.setState({id:id+1})
}
undel(id){
console.log(id);
}
render(){
return(
<div>
<Search go={this.addItem} data="" />
<ul className="list-group">
{
this.state.items.map(function (item) {
return <Item key={item.name} id={item.id} name={item.name} undel={this.undel} />
})
}
</ul>
</div>
)
}
}
export default App;
