Deleting an item in ReactJS
Let me guess, Are you looking for something like this?
class Example extends React.Component { constructor(){ this.state = { data: [ {id:1, name: 'Hello'}, {id:2, name: 'World'}, {id:3, name: 'How'}, {id:4, name: 'Are'}, {id:5, name: 'You'}, {id:6, name: '?'} ] } } // shorter & readable delete(item){ const data = this.state.data.filter(i => i.id !== item.id) this.setState({data}) } // or this way, it works as well //delete(item){ // const newState = this.state.data.slice(); // if (newState.indexOf(item) > -1) { // newState.splice(newState.indexOf(item), 1); // this.setState({data: newState}) // } //} render(){ const listItem = this.state.data.map((item)=>{ return <div key={item.id}> <span>{item.name}</span> <button onClick={this.delete.bind(this, item)}>Delete</button> </div> }) return <div> {listItem} </div> }}React.render(<Example />, document.getElementById('container'));
In this example pay attention how i'm binding delete
method and pass there new parameter. fiddle
I hope it will help you.
Thanks
OP here. Since I know more about React four years later and this still gets views I figured I'd update this with how I'd go about it now.
SavedSearches.js
import React from 'react'import { SearchList } from './SearchList'let data = [ {index: 0, name: "a string", url: 'test.com/?search=string'}, {index: 1, name: "a name", url: 'test.com/?search=name'}, {index: 2, name: "return all", url: 'test.com/?search=all'} ];let startingIndex = data.length;export class SavedSearches extends React.Component { constructor(props) { super(props); this.state = { name: '', url: '', index: startingIndex, data: data } this.deleteSearch=this.deleteSearch.bind(this) } deleteSearch(deleteThis) { console.log(deleteThis); let newData = this.state.data.filter( searchItem => searchItem.index !== deleteThis.index ) this.setState({ data: newData }) } render() { return ( <div className="search-container"> <SearchList data={this.state.data} onDelete={this.deleteSearch}/> </div> ) }}
Here I created a method called deleteSearch
that takes an object as a parameter. It then runs .filter
on the this.state.data
array to create a new array that includes all items that don't meet the condition. The condition checks if the id of each object in the data array matches the id of the parameter. If so, then it is the one that is being deleted. The new array that is created by .filter
is set to a variable called newData
, and then I update the state with the newData
array.
I then pass this method to the SearchList
component in a prop called onDelete
.
This method is also bound in the constructor using .bind()
so that this
will refer to the correct this
when the method is passed down the component tree.
SearchList.js
import React from 'react'import { SearchItem } from './SearchItem'export class SearchList extends React.Component { render() { let searchItems = this.props.data.map((item, i) => { return ( <SearchItem index={i} searchItem={item} url={item.url} onDelete={this.props.onDelete}> {item.name} </SearchItem> ); }); return ( <ul> {searchItems} </ul> ); }}
My deleteSearch
method is just passing through the component tree here. SearchList
receives the method as a props this.props.onDelete
and passes it to SearchItem
.
The other major key here is that the parameter in the map function is being passed as props: searchItem={item}
. This will allow the entire current object to be accessed via props; and if you remember, my deleteSearch
function takes an object as a parameter.
SearchItem.js
import React from 'react'export class SearchItem extends React.Component { constructor(props) { super(props); this.handleDelete=this.handleDelete.bind(this) } handleDelete() { this.props.onDelete(this.props.searchItem) } render() { return ( <li key={this.props.index}> {/* Still getting a console error over this key */} <a href={this.props.url} title={this.props.name}> {this.props.children} </a> ({this.props.url}) <button onClick={this.handleDelete} value={this.props.index}><i className="fa fa-times"></i> </button> </li> ); } };
Now my method arrives where it will be used. I create a handler method handleDelete
and inside I access the deleteSearch
method with this.props.onDelete
. I then pass it the object of the list item that is being clicked on with this.props.searchItem
.
In order for this to work when a user clicks, I had to add an onClick
event listener that calls my handler method, like this: onClick={this.handleDelete}
. The final step is to bind this.handleDelete
in the SearchItem
constructor method.
Now, clicking on the button will remove the item from the this.state.data
array. For an example of how to add an item to the array, see my repository
Are you looking for somthing like this?
Todos.js
import React from 'react'import {TodoItem} from "./TodoItem";export const Todos = (props) => { let myStyle = { minHeight: "70vh", margin: "40px auto" } return ( <div className="container" style={myStyle}> <h3 className="my-3">List</h3> {props.todos.length===0? "No records to display": props.todos.map((todo)=>{ console.log(todo.sno); return (<TodoItem todo={todo} key={todo.sno} onDelete={props.onDelete}/> ) }) } </div> )}
TodoItem.js
import React from 'react'export const TodoItem = ({todo, onDelete}) => { return ( <> <div> <h4>{todo.title}</h4> <p>{todo.desc}</p> <button className="btn btn-sm btn-danger" onClick={()=>{onDelete(todo)}}>Delete</button> </div> <hr/> </> )}
Please see the repository, here you can find add ,delete and list items