如何从 React.js 中的数组中删除 JSX 元素？

Question

I have an array of sections in state which holds some list of JSX elements. I'm trying to delete a specific element which is JSX from array when clicked on button but I can't figure out how to do this. Any help would be appreciated.

Section.js

class Section extends React.Component {
    state = {
        sections: []
    };

    addLectureHandler = () => {
        const secs = this.state.sections;
        secs.push(
            <LectureItem key={Math.random} removeLectureHandler={() => this.removeLectureHandler(<LectureItem />)} />
        );
        this.setState({ sections: secs });
    };

    removeLectureHandler = (item) => {
        console.log(item);
    };

    render() {
        const { classes } = this.props;
        return (
            <div className={classes.container}>
                <h4 className={classes.sectionTitle}>
                    Section 1 - <AssignmentIcon /> Introduction
                </h4>
                <div className={classes.addButtonContainer}>
                    <Button variant="outlined" className={classes.addButton} onClick={this.addLectureHandler}>
                        Create Lecture
                    </Button>
                </div>
                <div className={classes.lectureContainer}>{this.state.sections}</div>
            </div>
        );
    }
}

export default withStyles(styles)(Section);

LectureItem.js

class LectureItem extends React.Component {
    render() {
        const { classes, removeLectureHandler } = this.props;
        return (
            <div className={classes.container}>
                <div className={classes.titleContainer}>
                    <TextField className={classes.textField} label="New Lecture Title" name="lecture" margin="normal" />
                    <Button className={classes.removeButton} onClick={removeLectureHandler}>
                        <ClearIcon />
                    </Button>
                </div>
                <Button variant="contained" color="primary" className={classes.button}>
                    Add
                </Button>
            </div>
        );
    }
}

export default withStyles(styles)(LectureItem);

Answer 1

Its quite straight forward, its more of a logic statement rather than react, Let me show it to you

For you method addLectureHandler change push command to the following

 secs.push(
        <LectureItem key={Math.random} removeLectureHandler={() => this.removeLectureHandler(secs.length)} />
    );

You were passing <LectureItem /> which is new element not the one you are pushing, so We will pass length (the actual new index of this element).

Next change you removeLectureHandler to this

removeLectureHandler = (indexToDelete) => {
    console.log(indexToDelete);
    const secs = this.state.sections;
    secs.splice(indexToDelete, 1);
    this.setState({ sections: secs });

};

And you have successfully deleted an element from the Sections and UI:-0