Если я правильно понял проблему, то вы хотите, привязать к обработчику onClick индекс элемента. Я предпочитаю делать это через замыкания.
Попутно советую перенести bind в конструктор.
Кстате, bind можно не делать, если заменить объявление метода на стрелочный синтаксис тогда все станет намного наглядней метод будет выглядеть вот так и как я сказал bind не нужен:
removeCount = (idx) => (/*сюда будет передан event, но он вам типа не нужен*/) => {
/* тело с this, он будет autobinded */
}
Конструктор тоже будет не нужен, можно просто написать state
class App extends React.Component {
//constructor(){
// super();
// this.state ={
// count: [1,2,3,4,5,6,7,8,9]
// }
// this.removeCount = this.removeCount.bind(this)
//}
this.state = {
count: [1,2,3,4,5,6,7,8,9]
};
/*...*/
}
Но я сохранил твой вариант
Если заменить метод splice на не мутирующий slice, то тело функции станет одной строкой без доп. переменных. Подсказка в коде
class App extends React.Component {
constructor(){
super();
this.state ={
count: [1,2,3,4,5,6,7,8,9]
}
this.removeCount = this.removeCount.bind(this)
}
removeCount(idx) {
return function() {
let newItems = this.state.count;
newItems.splice(idx, 1);
this.setState({count: newItems});
// this.setState({count: this.state.count.slice(/*чо нада*/)});
// все что выше в методе тогда не нужно
}
}
render() {
const list = this.state.count.map(function(index, i){
return (
<div
key={i}
onClick={this.removeCount(i)}>
<p>{index}</p>
</div>
);
})
return (
<div className="row">
{list}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
Ну ОК, мой вариант выглядел бы так (возможны опечатки, пишу прям тут)
class App extends React.Component {
state ={
count: [1,2,3,4,5,6,7,8,9]
}
removeCount = (idx) => () => {
this.setState({count: this.state.count.slice(idx, 1)});
}
render() {
return (
<div className="row">
{this.state.count.map(i => (
<div
key={i}
onClick={this.removeCount(i)}>
<p>{i}</p>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
