I wonder if there is a way to pass values to a function such as "onClick". The following code is not to be considered due to performance considerations:
<div onClick={() => handleClick(value)}/>
I'd like to write:
<div onClick={handleClick(value)}/>
But this ain't possible in React. Any solutions?
actually it is possible: you need to return a function that do your work. something like this:
const handleClick = value => () => {
// your logic
}
then use it like this:
<div onClick={handleClick(value)}/>
Yes, if your callback of a prop such as: onClick will pass a param event when it call. In this case, just pass a function name. Example:
const Comp = (props) => {
const [value, setValue] = useState(0);
const handleClick = (event) => {
setValue(value + 1);
}
return <div>
<div> {value} </div>
{/*pass function name that declare of function have one param or don't have any pram*/}
<button onClick={handleClick} > Click me</button>
</div>
}
function name. That function is used to call back when click.You can imagine, when you click button, somewhere in button controller will use the function name you passed. And then, it pass an event to function and call handleClick(event).handleClick instead of pass it in function. What you need to pass in function is variable to pass after click like event. Same as with onClick={(event) => handleClick(value)}
onClickevent.