why in hell tutorial show harder way to Onclick?
I don’t know what tutorial you’re speaking of, so I’ll just use the code you put up
Ok, a few things. First, you have to stop trying to apply what you learned with jquery to react. React is a different way of programming. So you have to get used to reading the documentation to find your solutions.
Now, there are two different types of react components, and you will see them called different ways. There’s functional (dumb, presentational, stateless), or class (smart). https://reactjs.org/docs/state-and-lifecycle.html
Using your examples:
- Functional components don’t carry state, so they have no knowledge of anything except what you pass in. This is why we call them dumb components
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.'); // <-- This is fine since there is no state
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
- Class components can carry state
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {}; // <--- This is the component's state. And can only be used in
// in a class component
}
handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
render() {
return (
<a href="#"
onClick={this.handleClick} // <-- we now have to call the class method with "this"
>
Click me
</a>
);
}
}
If you don’t need state, always use a functional component.
Think of classes as objects that have a life. They are born, have knowledge of themselves, can act independently, and when they die, they take all that knowledge with them. You can read up on classes here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
Now, you want to know the id of the element that was clicked, right? In React, you can attach any prop you want to the dom elements. So you can just do (with a functional, stateless component): https://reactjs.org/docs/components-and-props.html#rendering-a-component
function ActionLink() {
function handleClick(id) {
e.preventDefault();
console.log(`The link for id ${id} was clicked.`);
}
return (
<a href="#"
id="some-id" // <-- custom prop; get the id somehow
onClick={() => handleClick("some-id")} // <--- pass the same id to the handler
>
Click me
</a>
);
}
This is how you know which element was clicked. The only issue would be that a new function is created for each render cycle. You may hear alot about that. But for now, I think you should just try to get a grasp for react before worrying about that, since it only matters on really complex, dynamic apps.
