Whenever I click a button, the same component is dynamically rendered on top of the list. But now, I need to implement a feature where users can delete any component from the list by clicking a cancel button associated with each component.
Here's my current progress:
Local state:
state = {
formCount: 0
}
Add and Cancel functions:
onAddClicked = () => {
this.setState({formCount: this.state.formCount + 1});
}
onCancelButtonClicked = (cancelledFormKey: number) => {
const index = [...Array(this.state.formCount).keys()].indexOf(cancelledFormKey);
if (index > -1) {
const array = [...Array(this.state.formCount).keys()].splice(index, 1);
}
}
Parent component snippet:
{ [...Array(this.state.formCount).keys()].reverse().map(( i) =>
<Form key={i}
onCancelButtonClicked={() => this.onCancelButtonClicked(i)}
/>)
}
The challenge I'm facing is keeping track of which form was deleted. I believe I need to create a new object in my state to keep track, but since I'm using an array based on count, I'm not sure how to identify the exact index of the removed form. Any suggestions on how to achieve this?