Unable to delete item from an array in React

Question

I am trying to display data from another file into a Table component in React. The data is getting displayed but the delete method isn't working. I am not sure what mistake I have done over here. I am not getting any console errors and the delete button does say it's clicked in the console.

Movie.js

import React, { Component } from 'react'
import { Table } from 'react-bootstrap';
import Data from './data';

export default class Movie extends Component {
    constructor(){
        super();
        this.state={
            movies:Data
        }
        console.log(this.state.movies)
        this.handleDelete=this.handleDelete.bind(this);
    }

    handleDelete= movie=>{
        const del=this.state.movies.filter(item => item !== movie.id);
        this.setState({
            movie:del
        })
        console.log("clicked")
    }
    render() {
        //const store=this.state.movies.id;
        const show= this.state.movies.map((movie,i)=>{
            return(
       <tr key={i}>
         <td>{movie.id}</td>
         <td>{movie.name}</td>
         <td>{movie.price}</td>
         <td>{movie.rating}</td>
        <td> <button onClick={()=>this.handleDelete(movie)}>Delete</button></td>
       </tr>
        )})
        return (
            <div>
                <Table striped bordered hover>
                <thead>
                    <tr>
                    <th>#</th>
                    <th>Movie</th>
                    <th>Price</th>
                    <th>Rating</th>
                    </tr>
                </thead>
                <tbody>
                    {show}
                </tbody>

</Table>
            </div>
        )
    }
}

Data.js

  const i=[
    {
    id:1,
    name:"Captain america",
    price:"$10",
    rating:'5 stars'
    },
    {
        id:2,
        name:"Batman",
        price:"$12",
        rating:'4 stars'
    },
    {
        id:3,
        name:"Arrow",
        price:"$8",
        rating:'3 stars'
    }
]
const data=i;

export default data;

Don't use index as the key Lists and Keys

Tim
– Tim

2020-02-20 22:58:26 +00:00
Commented Feb 20, 2020 at 22:58 — Tim
– Tim, Commented Feb 20, 2020 at 22:58

wobsoriano · Accepted Answer · 2020-02-20 23:12:44Z

2

First you have a typo and second you're not checking if the movie's id is not equal to current loops item id.

// item.id !== movie.id
const del = this.state.movies.filter(item => item.id !== movie.id);

// movies not movie
this.setState({
   movies: del
})

Also don't ever use index as key in production (unless the items are static), it's an anti-pattern. Instead, use the unique id <tr key={movie.id}>

edited Feb 20, 2020 at 23:12

answered Feb 20, 2020 at 23:07

wobsoriano

13.5k25 gold badges106 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Berg · Accepted Answer · 2020-02-20 23:01:57Z

0

in your handleDelete function

handleDelete= movie=>{
        const del=this.state.movies.filter(item => item !== movie.id);
        this.setState({
            movie:del <=== movies not movie!
        })
        console.log("clicked")
    }

i think you just typo'd movie instead of movies when setting state

answered Feb 20, 2020 at 23:01

Matt Berg

4991 gold badge4 silver badges10 bronze badges

Collectives™ on Stack Overflow

Unable to delete item from an array in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related