How can I delete the item if it is stored as an array in reactjs?

Question

Have to display the items via web API. I got the response successfully and displayed the items. But I don't know how to delete the item from the list.

Displayed the delete icon to every item, but I am not able to delete the item from the state. What did I wrong? Please help me out.

import React from 'react';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      posts: []
    }

    this.UserList = this.UserList.bind(this);
    this.setStateHandler = this.setStateHandler.bind(this);

this.setDeleteHandler = this.setDeleteHandler.bind(this);
  }
  componentDidMount() {
    this.UserList();
  }
 setStateHandler() {
    alert(0)
      var item = {
        "url": "http://www.imdb.com/title/tt4937812/", 
        "title": "PAMMAL K SAMBANTHAM", 
        "imdb_id": "tt4937812", 
        "type": "Film", 
        "year": "2015"
      };
      var myArray = this.state.posts;
      myArray.push(item)
      console.log(myArray)
      this.setState({posts: myArray})
   };
    setDeleteHandler() {
    alert("idris")

   };
  UserList() {
    alert(1)
      fetch('http://www.theimdbapi.org/api/person?person_id=nm0352032').then(response => {
      return response.json();
    }).then(data => {
      const posts = data.filmography.soundtrack;
      this.setState({posts});
    });

  }

  render() {
    return (
      <div>
        <div>
          {
            this.state.posts.map((item, i) => {
              return <Content item={item} key={i}/> 
            })
          }
        </div>
        <button onClick = {this.setStateHandler}>SET STATE</button>

      </div>
    );
  }
}

class Content extends React.Component {
  render() {
    return (
      <div>
      <table>
      <tbody>
<tr>
<td>{this.props.item.title}</td>
<td>{this.props.item.type}</td>
<td>{this.props.item.type}</td>
<td><button onClick = {this.setDeleteHandler}>Delete</button></td>


</tr>
</tbody>
      </table>

      </div>

    );
  }
}

export default App;

Can anyone please help on this?

Thank you.

Prakash Sharma · Accepted Answer · 2017-09-20 17:33:48Z

1

Make your setDeleteHandler like this

setDeleteHandler(index) {
    return () => {
      let posts = [...this.state.posts];
      posts.splice(index,1);
      this.setState({posts});
    }
};

Then pass this function to your content component like this

this.state.posts.map((item, i) => {
  return <Content item={item} key={i} deleteHandler={this.setDeleteHandler(i)}/> 
})

And then in your content component call this function like this

<td><button onClick = {this.props.deleteHandler}>Delete</button></td>

answered Sep 20, 2017 at 17:33

Prakash Sharma

16.7k6 gold badges35 silver badges38 bronze badges

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

2 Comments

Idris Over a year ago

why we are putting like this [...this.state.posts];.

Prakash Sharma Over a year ago

This is the spread operator. We are doing this to create a new array from this.state.posts so that we can avoid mutating the original state array.

Collectives™ on Stack Overflow

How can I delete the item if it is stored as an array in reactjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related