I have the below code:
import "./styles.css";
export default function App() {
const handleOnClick = (index) => {
console.log(index);
}
return (
<div className="App">
<ul>
<li onClick={handleOnClick.bind(this, 1)}>list one</li>
<li onClick={handleOnClick.bind(this, 2)}>list two</li>
</ul>
</div>
);
}
Each time when I click on a list, the handleOnClick function gets the index which being passed to it.
I am wondering what does "this" refer to in this example? why we need to use bind() and pass "this" inside it?
I am wondering what does "this" refer to in this example?
Nothing useful, for several reasons.
App is a Function Component, not a Class Component so doesn't have a useful this value to start withhandleOnClick is an arrow function, so the first argument of bind has no effecthandleOnClick doesn't use this internally so even if it wasn't an arrow function, binding would have no effectThe this value is completely arbitrary. It exists only so that the first argument to bind has a value at all. It would be more idiomatic to use null.
In Class components, bind is used to ensure that this continues to point to the component instead of the DOM element when a method is passed to a click event handler (usually so that this.setState works).
A good example of a Function Component would attempt to minimise the creation of new functions on each render so that the click event handlers in the real DOM would not need to be updated each rendering.
This would be achieved by making use of useCallback so that handleOnClick wasn't given a new value each render and not using bind (since bind creates new functions).
Since you want to pass a different value as the argument, this is most cleanly achieved by breaking out the clickable elements into separate components and passing the values as props.
Additionally, List Items are not designed to be clicked on. Among other things, they will not be reachable by keyboard navigation and won't be announced as being clickable by screen readers. You should use an element designed to be interactive.
export default function App() {
return (
<div className="App">
<ul>
<Item index={1} label="list one" />
<Item index={2} label="list two" />
</ul>
</div>
);
}
const Item = ({ index, label }) => {
const handleOnClick = useCallback(() => {
console.log(index);
}, []);
return <li><button onClick={handleOnClick}>{label}</button></li>
}
bind is a variadic method that requires the context (the value that this will take when the function is called) as the first argument. All the other arguments of bind will be equal to the arguments of the called function.
In your case, the called function is not using this, but you still need to pass some argument as the first parameter, even if the value is not used. Who wrote that script, decided to use the outer this of the caller, but nothing will change if you substitute this with any other value, as null or undefined.