_deleteQuote is not a function - reactjs

Question

Cannot execute function declared in the Class component which has been passed to a function component.
There is a openBookDetails declared in the Class and that executes without a problem. I used the same logic to implement the deleteQuote function but I get a TypeError: _deleteQuote is not a function
I am trying to execute a function within a TableRow when a button is clicked however I get a typeerror.
import Modal from '../Modal/Modal'
import add from '../../images/add.png'
import addSelected from '../../images/addSelected.png'
import './Dashboard.css'
const TableRow = ({ row, openBookDetails, deleteQuote }) => (
<tr >
<th scope="row" onClick={openBookDetails}>{row.author}</th>
<td onClick={openBookDetails}>{row.quote}</td>
<td><i className="fa fa-close" onClick={deleteQuote}></i></td>
</tr>
)
const Table = ({ data, openBookDetails, deleteQuote }) => (
<table className="table table-hover">
<thead>
<tr className="table-active">
<th scope="col">Author</th>
<th scope="col">Quote</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{data.map((row, index) =>
<TableRow key={index} row={row} openBookDetails={() => openBookDetails(row, index)} deleteQuote={() => deleteQuote()}/>
)}
</tbody>
</table>
)
class Dashboard extends Component {
constructor() {
super()
this.state = {
quotes: [
{
"quote": "Our industry does not respect tradition - it only respects innovation.",
"author": "Satya Nadella",
"position": "CEO of Microsoft"
},
{
"quote": "Engineering is the closest thing to magic that exists in the world.",
"author": "Elon Musk",
"position": "Tesla and SpaceX CEO"
},
{
"quote": "For me, it matters that we drive technology as an equalizing force, as an enabler for everyone around the world.",
"author": "Sundar Pichai",
"position": "CEO of Google"
}
],
addSource: add,
isModalOpen: false,
index: '',
author: '',
quote: ''
}
}
onAddMouseOver = () => {
this.setState({ addSource: addSelected })
}
onAddMouseOut = () => {
this.setState({ addSource: add })
}
toggleModalOpenOrClose = () => {
this.setState({ isModalOpen: !this.state.isModalOpen })
this.setState({index: ''})
this.setState({author: ''})
this.setState({quote: ''})
}
openBookDetails = (row, index) => {
console.log('Row Clicked');
// console.log(index);
// console.log(row)
// console.log(row.author)
// console.log(row.quote)
// console.log(this.state.quotes[row])
// console.log(index)
this.setState({ isModalOpen: true});
this.setState({ index: index });
this.setState({ author: row.author });
this.setState({ quote: row.quote });
}
deleteQuote = () => {
this.setState({isModalOpen: false})
console.log('Row deleted')
}
addNewQuote = () => {
var quote = {
"quote": "There is no corruption in the system. The system is correuption",
"author": "Unknown",
"position": "Unknown"
}
console.log(this.state)
var quotes = this.state.quotes.concat(quote);
this.setState({ quotes: quotes });
}
render() {
return (
<div class='pt-3'>
<Table
data={this.state.quotes}
openBookDetails={this.openBookDetails} />
<div className='text-center align-items-center justify-content-centerpt-5'>
<a href='#add' onClick={this.toggleModalOpenOrClose}>
<img src={this.state.addSource} className='addButton mx-1' alt="add" onMouseOver={this.onAddMouseOver} onMouseOut={this.onAddMouseOut} />
</a>
</div>
<Modal
isModalOpen={this.state.isModalOpen}
toggleModalOpenOrClose={this.toggleModalOpenOrClose}
state={this.state}
addNewQuote={this.addNewQuote} />
</div>
)
}
}
export default Dashboard
When I click the ```<i className="fa fa-close" onClick={deleteQuote}></i>``` inside of the ```TableRow``` component I expect it to execute the ```deleteQuote``` function

Answer 1

You need to pass deleteQuote function as a prop to Table component when you calling it in Dashboard component in order to access it in Table component
So you need to change below line in Dashboard component
Change
<Table
data={this.state.quotes}
openBookDetails={this.openBookDetails} />
To
<Table
data={this.state.quotes}
openBookDetails={this.openBookDetails}
deleteQuote={this.deleteQuote} />