add data in this.state to use in another function - reactjs

Question

I'm trying to create a delete method in reactJS. My logic is to get the data from the api, use that data in the this.state and call it from the componentDidMount to delete the data.
I can't figure out how to make at the this.state to display the data ID or so I can delete it.
When I click Delete button I get the error of TypeError: Cannot read property 'state' of undefined
Anyone has an idea?
class DeleteForm extends Component {
constructor(props){
super(props);
this.state = {
id: ''
}
}
async componentWillMount() {
const url = 'http://localhost:8080/zoom';
const response = await fetch(url);
const data = await response.json();
console.log(data);
}
componentDidMount() {
axios.delete(`http://localhost:8080/zoom/${this.state.id}`)
.then(res => console.log(res.data));
}
render() {
return(
<button onClick={this.componentDidMount}>Delete</button>
)
}
}

Answer 1

Assuming that you have id in the response. You can do it like this.
class DeleteForm extends Component {
constructor(props){
super(props);
this.state = {
id: ''
}
}
async componentDidMount() {
const url = 'http://localhost:8080/zoom';
const response = await fetch(url);
const data = await response.json();
this.setState({
id: data.id
})
}
delete = () => {
axios.delete(`http://localhost:8080/zoom/${this.state.id}`)
.then(res => console.log(res.data));
}
render() {
return(
{this.state.id && <button onClick={this.delete}>Delete</button>}
)
}
}
Your button will show up only when id is set.