Как передать текущий элемент в функцию, чтобы я мог удалить его из массива в компоненте реакции?

Question

Я просто не могу передать текущий элемент в функцию, потому что у меня есть событие click в "X", которое является другим узлом, поэтому я всегда получаю элемент, переданный как X, а не элемент в массиве. Я думал о том, чтобы сделать его другим компонентом и импортировать его, но я просто хотел посмотреть, есть ли у меня что-то здесь, как бы я мог удалить его. Поэтому моя главная проблема заключается в том, как передать текущий элемент в массив. Вот мой код

export default class App extends Component {
constructor(props) {
    super(props)
    this.state = {
        fruits: ["apple", "orange", "mango", "banana"],
        name: "Micheal"
    }
    // this.handleClick = this.handleClick.bind(this);

}

delItem(item) {
    console.log('Click happened');
    console.log(item)
    //console.log(item.target.innerText) //x
    console.log(this.state.fruits)
    var newList = this.state.fruits.filter(val => {
        return item != val
    })
    console.log(newList);
    // this.setState({
    //     fruits : newList
    // })

}

render() {
    var fruitsList = this.state.fruits.map(item => {
        return (
            <li>
                <h1> {item} </h1>
                <p className="del-btn" onClick={this.delItem.bind(this)}> x </p>
            </li>
        )
    })

    return (
        <div>
            <div>
                <h1> Hello {this.state.name} from inside a component </h1>
                <About></About>
            </div>
            <div>
                <ul>
                    {fruitsList}
                </ul>
            </div>
        </div>
    )
 }
}


render(<App name="Milan" />, document.getElementById('app'));

Answer 1

Ну, вы можете выбрать отправку элемента ссылки непосредственно в функции onClick - this.delItem.bind(this, item)

delItem(item) {
   let fruits= this.state.fruits;

   function findFruit(element, index, array){
        return element==item;
   }

   let index = fruits.findIndex(findFruit);
   fruits.splice(index,1);
   this.setState({fruits : fruits});
}

Answer 2

Измените свою функцию delItem на более высокий порядок... Вы можете иметь функцию delItem(), которая возвращает функцию, и эта функция может использовать параметр, переданный в функцию delItem()... Передайте результат!

delItem = (fruit) => () => {
  console.log('Click happened');
  console.log(item)

  // delete your fruit
}

Затем свяжите onClick следующим образом:

<p className="del-btn" onClick={this.delItem(item)}> x </p>