react js delete handler removes the 1st index in the array

Question

The problem is any item button click will delete the 1st index item in the array.

I looked at these resources on handling deleting an item in an array in react.

I've tried changing how my handler is called in TodoList and TodoItemLIst and that causes the handler not to fire on click. I've tried different methods of binding the handler - adding a param has no effect on it -bind(this) breaks it & isn't necessary because I'm using a function.

I've tried setting state different ways using a filter method. No change happens...

this.setState((prevState) => ({
    todoItems: prevState.todoItems.filter(i => i !== index)
}));

I'm not understanding where/what the problem is.

class App extends Component {
constructor(props) {
super(props);

this.state = { 
  value: '',
  listItemValue: props.value || '',
  todoItems:  [
    {id: _.uniqueId(), item: 'Learn React.'},
    {id: _.uniqueId(), item: 'Improve JS skills.'},
    {id: _.uniqueId(), item: 'Play with kittens.'}
  ]
};
}

handleChange = (event) => {
let value = event.target.value;
this.setState({
  value: this.state.value,
  listItemValue: value
});
}

handleSubmit = (event) =>{
event.preventDefault();

this.setState({
  value: '',
  listItemValue: ''
});
}

addTodoItem = () => {
let todoItems = this.state.todoItems.slice(0);

  todoItems.push({
    id: _.uniqueId(),
    item: this.state.listItemValue
  });

  this.setState(prevState => ({
    todoItems: [
        ...prevState.todoItems,
        {
          id: _.uniqueId(),
          item: this.state.listItemValue
        }]
  }))
};

deleteTodoItem = (index) => {
let todoItems = this.state.todoItems.slice();
todoItems.splice(index, 1);

this.setState({ 
  todoItems
});
}

render() {

return (
  <div className="App">
    <h1>Todo List</h1>
    <TodoListForm name="todo"
                  onClick={ ()=>this.addTodoItem() }
                  onSubmit={ this.handleSubmit }
                  handleChange={ this.handleChange }
                  value={ this.state.listItemValue } />
    <TodoList onClick={ ()=>this.deleteTodoItem() }
              todoItems={ this.state.todoItems }/>
  </div>
);
}
}

const TodoList = (props) => {
const todoItem = props.todoItems.map((todo) => {
   return (
    <TodoListItem  onClick={ props.onClick }  
                   key={ todo.id }
                   id={ todo.id }
                   item={ todo.item }/>
   );
});
return (
<ul className="TodoList">
    {todoItem}
</ul>
);
}

const TodoListItem = (todo, props) => {
return (

    <li className="TodoListItem">
        <div className="TodoListItem__Item">{todo.item}
        <span className="TodoListItem__Icon"></span>
        <button onClick={ todo.onClick } 
                type="button" 
                className="TodoListItem__Btn">&times;</button>
        </div>
    </li>
)
};

In the `deleteTodoItem` method, try just 'let todoItems = this.state.todoItems.slice(0, -1);` and remove the call to `splice()`. — Nick, Jan 12 '18 at 20:00
And in addTodoItems, you can use `concat` to avoid using `slice`. See https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs#26254086 — Nick, Jan 12 '18 at 20:01
And this should be easy to solve using breakpoints and the dev tools. — Nick, Jan 12 '18 at 20:02

score 1 · Accepted Answer · answered Jan 12 '18 at 20:21

1

In the deleteTodoItem method, try just

let todoItems = this.state.todoItems.slice(0, -1);

and remove the call to splice().

answered Jan 12 '18 at 20:21

Nick

4,901
40
61

react js delete handler removes the 1st index in the array

1 Answers1