React delete list of component with button - reactjs

Question

I insert all different components into an array so that last clicked component will show on the top,
but I don't know how to delete the item with a button click inside the component
It seems I can't pass the function with key index inside the component...
So I don't know which component I clicked ...
Please help me figure it out.
ComponentA.js
....
render(){
return <button onClick{this.props.Delete}>Delete</button>
}
Parent.js
const List =({ComponentsList}) =>(
<div>
ComponentsList.map((item,i) => <div key={i}>{item}</div>)}
</div>)
Besides,
I also find people don't use this way to list items,
what if these components are all different?
What will people usually deal with it?
Thanks !
.
.
.
Edited:
Figure out one question about how to delete component
see the answer below
But I find State still exist !!!
Can any one help me ?

Answer 1

Thanks to my friend I find my mistake.
Maybe it is too stupid to make this kind of obvious mistake so I can find an answer on the website.
Hope it will hope someone who is a beginner and need some information when deal this kind of problem.
Parent.js
constructor(props) {
super(props)
this.state = {
listState:[<ComponentB type="AAAA" delete={this.RemoveItem} />, ...]
}
}
RemoveItem(dom) {
dom.currentTarget.parentNode.remove()
console.log("detect delete")
}
render() {
const mapToComponent = data => {
return data.map((contact, i) => {
return <div>{contact}</div>
})
}
return (
<div className="Graph-Panels">
{mapToComponent(this.state.PanelState)}
</div>
)
}
}

Answer 2

Let's say you hold the child components in a list. You can have it in the State.
inputList: []
Let's say there's a button on the parent component to add child components. Its code will look similar to this.
<div>
<Button variant= "light" className="button" onClick={this.onAddAnotherBtnClick}>
Add Another
</Button>
{this.state.inputList.map(function(input, index) {
return input;
})}
</div>
(You might have to bind the onAddAnotherBtnClick like this). In the state,
this.onAddAnotherBtnClick = this.onAddAnotherBtnClick.bind(this);
onAddAnotherBtnClick looks like this.
onAddAnotherBtnClick = (event) =>{
const inputList = this.state.inputList;
this.setState({
inputList: inputList.concat(<ChildComponent Id={inputList.length}
callbackDeleteButton={this.delete}/>)
});
}
This is the delete method.
delete = (Id) => {
delete this.state.inputList[Id];
this.setState({ inputList : this.state.inputList });
}
This is the Delete button on the child component.
<Button variant= "light" className="button" onClick={this.onDeleteButtonClick}>
Delete
</Button>
Here's the onDeleteButtonClick method.
onDeleteButtonClick = () => {
this.props.callbackDeleteButton(this.state.Id);
}
(You'll have to bind the method in the State like this).
this.onDeleteButtonClick = this.onDeleteButtonClick.bind(this);
What happens here is that I send the ID to each child component when it's created on the props. When the child component's delete button is clicked it sends its ID to the parent through a callback method the parent has supplied.