I have to pass few values on clicking a button in ReactJS Functional Component, below is the code snippet.
<span className="edit" onClick={ onClickEdit(value.title, value.details)}>
<img src={editImg} height="15" width="15" />
</span>
This is showing an error. As I know we can't use 'this' keyword in Functional Component. Please help with this.
Try this
import React from 'react';
import SearchBar from './SearchBar';
const App = () => {
return (
<div className="ui container" style={{ marginTop: '10px' }}>
{/* <SearchBar /> */}
<button onClick={()=>testFunc('gi','jgj')}>click me</button>
</div>
)}
const testFunc = (a, b) => {
console.log(a, b);
}
export default App;
You can call your function like below snippet
<Button variant="info" onClick={() => editUser(userObject)}>Edit</Button>
The onClick props expects a function. By doing what you are doing, you are not passing a function, but calling a function directly in the prop.
You can pass an anonymous function (a function that is not declared) directly in the prop:
<span className="edit" onClick={() => onClickEdit(value.title, value.details)}>
<img src={editImg} height="15" width="15" />
</span>
onClick={() => onClickEdit(value.title, value.details)}