Как передать данные из родительского компонента?

Question

[Евгений Николаев]

Нужно передать данные из компонента 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;

Answer 1

[string15]

Попробуйте так.

this.state.items.map(function (item) {      		
    return <Item  key={item.name} id={item.id} name={item.name} undel={this.undel}  />
})

Comments

[Евгений Николаев]

А чем отличается от моего варианта ?)

[string15]

Евгений Николаев, В первый раз почему то не увидел)

Answer 2

[lnked]

Попробуйте так

return <Item  key={item.name} id={item.id} name={item.name} undel={this.undel.bind(this)}  />