ReactJS - popover onClick insde data-content doesn't work - reactjs

Question

I'm using ReactJS and I'm trying to do a delete confirm popover and it works but when I click on "delete" doesn't work at all!
I'm using a button and inside I have an Icon and when click should popover its data-content, and it does! but the onClick inside doesn't work, maybe it's the way that I'm writing it? Have no idea what's going on
What I'm doing wrong?
Thank you, hope you can help me!
import React, { Component } from 'react';
import moment from 'moment';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faTrashAlt, faEdit, faTimes } from '#fortawesome/free-solid-svg-icons'
import NewTask from '../NewTask/NewTask';
import './Tasks.css';
class Tasks extends Component {
constructor(props) {
super(props);
this.state = {
projectId: props._id,
project: props.project,
tasks: []
};
}
componentDidMount() {
fetch(`/dashboard/project/${this.props.projectId}/tasks`)
.then(response => {
return response.json()
}).then(task => {
this.setState({
tasks: task.tasks
})
}).catch(error => console.error('Error:', error));
}
appendTask = task => {
let tasks = this.state.tasks;
tasks.push(task);
this.setState({tasks});
}
removeTask = taskId => {
let tasks = this.state.tasks;
let taskToDel = tasks.find(function(element){
if(element._id === taskId) {
return element;
}
});
if(taskToDel) {
// Find index of task to remove
const index = tasks.indexOf(taskToDel);
// If task index is found remove task from array
if(index != -1)
tasks.splice(index, 1);
this.setState({tasks});
}
}
deleteTaskOnDb = task => {
let data = {taskId: task._id};
fetch(`/dashboard/project/${this.props.projectId}/tasks/delete`, {
method: 'delete',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
//if(response.status === 200)
return response.json()
}).then(taskId => {
this.removeTask(taskId);
}).catch(error => console.error('Error:', error));
}
render() {
//POPOVER FUNCTION HERE
$(function () {
$('[data-toggle="popover"]').popover()
})
//POPOVER FUNCTION HERE
const fontawesomeiconStyle = {
fontSize: '1em',
color: '#bd822a',
textAlign: 'center'
}
const listStyle = {
display:'flex',
flexFlow: 'row wrap',
justifyContent: 'space-between'
}
const { tasks } = this.state;
return (
<div>
<ul className="task-list">
{tasks.map(task =>
<li key={task._id} style={listStyle}> <div>
{task.tasktitle}
<br/>
<p style={{fontSize: '10px', color: '#a2a2a2'}}>{moment(task.created).format('MMM DD YY, h:mm A')} </p>
</div>
<div>
<p style={{fontSize: '12px', color: '#a2a2a2'}}>{task.taskcomment}</p>
</div>
<div>
//BUTTON HERE
<button type="button" className="example-popover btn--delete button--tasks" data-html="true" data-container="body" data-toggle="popover" data-placement="right" data-content="Are you sure? <button type='button' className='btn--delete button--tasks' onClick='{() => this.deleteTaskOnDb(task)}'> Delete</button>">
<FontAwesomeIcon style={fontawesomeiconStyle} icon={faTimes} />
</button>
//BUTTON HERE
</div>
</li>
)}
</ul>
{this.props.project &&
this.props.project._id &&
<NewTask projectId={this.props.project._id} appendTask={this.appendTask}/>
}
</div>
);
}
}
export default Tasks;