Delete an item without using index React

Question

I want to delete the item which is right clicked. I am using onContextMenu and event.preventDefault to avoid showing the context menu. However, I don't know how to delete an item without the index. The requirement of this is not using index to do deletion. The class App:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activities: activities,
            filteredActivities: activities,
            isShow: false,
        };
        this.handleSearchChange = this.handleSearchChange.bind(this);
        this.handleClickChange = this.handleClickChange.bind(this);
        this.addItem = this.addItem.bind(this);
        this.deleteItem = this.deleteItem.bind(this);
    }

    deleteItem(item) {
        item.preventDefault();
        const activities = this.state.activities.slice();
        var response = confirm("Sure delete?");
        if (response == true) {
            // how to delete please?
            this.setState({
                activities: activities
            });
        }
    }

    render() {
        const filteredActivities = this.props.filteredActivities;
        const isShow = this.state.isShow;
        return(
            <div className="notificationsFrame">
                <div className="panel">
                    <Header name={this.props.name} onClickSearch={this.handleClickChange} onClickAdd={this.addItem} />
                    { isShow ? <SearchBar inputChanged={this.handleSearchChange} /> : null }
                    <Content activities={this.state.filteredActivities} onRightClick={this.deleteItem}/>
                </div>
            </div>
        );
    }
}

The structure of data:

const activities = [
    {img_url: "assets/dog.jpg", time: "A hour ago", content: "Have lunch.", comment_count: "2" },
    {img_url: "assets/dog.jpg", time: "5 hour ago", content: "Have breakfast.", comment_count: "0" },
    {img_url: "assets/dog.jpg", time: "6 hour ago", content: "Get up.", comment_count: "1" }
];

The class content:

class Content extends React.Component {
    render() {
        return (
            <div className="content">
                <div className="line"></div>
                {this.props.activities.map(activity =>
                    <ActivityItem img_url={activity.img_url} time={activity.time}
                        content={activity.content} comment_count={activity.comment_count} onContextMenu={this.props.onRightClick}/>
                )}  

            </div>
        );
    }
}

The class item to show:

class ActivityItem extends React.Component{
    render() {
        return (
            <div className="item" {...this.props}>
                <div className="avatar">
                    <img src={this.props.img_url} />
                </div>

                <span className="time">
                    {this.props.time}
                </span>
                <p>
                    {this.props.content}
                </p>
                <div className="commentCount">
                    {this.props.comment_count}
                </div>
            </div>
        );
    }
}

Answer 1

You can filter your activities array.

 deleteItem(item) {
            item.preventDefault();
            const activities = this.state.activities;
            var response = confirm("Sure delete?");
            if (response == true) {


           activities.filter((i) => {
           if (i === item) {
           items.splice(items.indexOf(i), 1);
          }
             });


                this.setState({
                    activities: activities
                });
            }
        }

Answer 2

deleteItem need to modify a lot. The const activities = this.state.activities.slice(); is wrong and need to modify. I also need to find the item index. Then I just splice the item out.

deleteItem = item => {
        event.preventDefault();
        let activities = this.state.activities;
        var response = confirm("Sure delete?");
        if (response == true) {
            for(var i = 0; i < activities.length; i++){
                if(activities[i] == item){
                    activities.splice(i,1);
                };
            };
            this.setState({
                activities: activities
            });
        };
    }

The class content:

class Content extends React.Component {
    render() {
        return (
            <div className="content">
                <div className="line"></div>
                {this.props.activities.map(activity =>
                    <ActivityItem img_url={activity.img_url} time={activity.time}
                        content={activity.content} comment_count={activity.comment_count}
                        onContextMenu={() => this.props.onRightClick(activity)} />
                )}

            </div>
        );
    }
}

Answer 3

You can do this way

deleteItem = (item) => {
    const activities = this.state.activities.slice(item, 1);
    var response = confirm("Sure delete?");
    if (response == true) {
        // how to delete please?
        this.setState({
            activities: activities
        });
    }
}

The class content:

class Content extends React.Component {
    render() {
        return (
            <div className="content">
                <div className="line"></div>
                {this.props.activities.map(activity =>
                    <ActivityItem img_url={activity.img_url} time={activity.time}
                        content={activity.content} comment_count={activity.comment_count}
                        onContextMenu={() => this.props.onRightClick(activity)} />
                )}

            </div>
        );
    }
}