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);
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.