Я хочу удалить определенный элемент div, который является динамическим c. Но когда я нажимаю кнопку удаления, все элементы удаляются. Я использую базу данных Firebase в реальном времени, и мне удалось получить мои дочерние ключи. Моя цель от кнопки удаления, соответствующие дочерние ключи удаляются.
Вот мои извлеченные дочерние ключи из базы:
Вот мой рендер:
render(){
return (
<div>
<NavBar />
<div className="container">
<Alert variant="success">Good day!! We have <strong><Badge pill variant="danger" > {this.state.data.length}</Badge>{''}</strong> Applications to process!</Alert>
<div>
{this.state.data.map((val, key)=>{
return (
<div>
<Accordion defaultActiveKey="0">
<Card>
{console.log(key)}
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
<Badge variant="info">Job Position</Badge>{' '}
<Badge variant="primary"> <strong className="space">{val.resumeFor}</strong></Badge>{' '}
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<h1><strong>{val.applicantName}</strong></h1>
<label><b>Skills and Github Link</b></label>
<p>{val.SkillsGithub}</p>
{/* show the pdf */}
{/* <div>
<img src={`${val.url}`}
</div> */}
{/* <p>{console.log(this.state.data.length)}</p> */}
<Button value={ key } onClick={(e) =>this.delete(`${e}`)} variant="danger">Danger</Button> <Button variant="info">Info</Button>{' '}
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
)
})}
</div>
</div>
</div>
)
}
Вот моя функция удаления:
delete = (i) => {
let resumeRef = firebase.database().ref('resume');
resumeRef.on("value",(snapshot) => {
snapshot.forEach((childSnapshot) => {
var id = childSnapshot.key.valueOf(i);
console.log(id);
// firebase.database().ref('resume').child(id).remove();
// console.log(i);
});
});
}
1 :