delete data in firebase using React application - reactjs

Question

Good day, I'm new React and firebase, Today, I using React and Firebase to display, add and delete data. I have some data in the firebase and display it. Now, I want delete some of the data, but I don't know. I create a button delete that whenever the user click it the data will be removed. Please help..
import React , { Component, Fragment } from 'react';
class Form extends Component {
constructor(){
super();
this.state = {
db: [],
name: "",
city: ""
}
this.changHandle = this.changHandle.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.removeData = this.removeData.bind(this)
}
componentDidMount() {
const { firestore } = this.props
firestore.collection('cafes').orderBy('name')
.onSnapshot((db) => {
const data = db.docs.map(datas => datas.data())
this.setState({
db: data
})
})
}
changHandle(event){
const {name, value} = event.target
this.setState({[name]:value})
}
handleSubmit(e){
e.preventDefault();
this.props
.firestore
.collection('cafes')
.add({city: this.state.city, name: this.state.name})
}
removeData(id){
this.props
.firestore
.collection('cafes').doc(id).delete();
}
render(){
return (
<div>
<form onSubmit={this.handleSubmit} autoComplete = "off">
<input
type="text"
name="name"
value={this.state.name}
placeholder="Name"
onChange={this.changHandle}
/><br/>
<input
type="text"
name="city"
value={this.state.city}
placeholder="City"
onChange={this.changHandle}
/><br/>
<button type="submit">Add user</button>
</form>
<p>Name:{this.state.name} {this.state.city}</p>
{this.state.db.map(data =>
<div>
<li key={data.id}>{data.name} {data.city}</li>
<button onClick={() => this.removeData(data.id)}>Delete</button>
</div>)
}
</div>
)
}
}
export default Form
MyApplication

Answer 1

The problem is that you are not setting an id for your document in firestore so it is just assigning a random one. In your handle submit button you need to do something like this:
const id = new Date().getTime()
this.props
.firestore
.collection('cafes').doc(id)
.add({city: this.state.city, name: this.state.name, id: id})