As there are two types of component in react such as Functional and Class component.
1. Functional component then follow the below code.
function ActionComponent() {
function functionExam() {
console.log('The inner html was clicked.');
}
return (
<div onClick={handleClick}>AAAAAAAAA</div>
);
}
2. Class Component are as follows.
class ActionComponent extends React.Component {
constructor(props) {
super(props);
// This binding is necessary to make `this` work in the callback
this.functionExam = this.functionExam.bind(this);
}
functionExam() {
console.log('The inner html was clicked.');
}
render() {
return (
<div onClick={this.functionExam}>AAAAAAAAA</div>
);
}
}
If calling bind annoys you, there are two ways to get rid of this by using arrow function.
class ActionComponent extends React.Component {
// This syntax ensures `this` is bound within functionExam.
functionExam = () => {
console.log('The inner html was clicked.');
}
render() {
return (
<div onClick={this.functionExam}>AAAAAAAAA</div>
);
}
}
Another way of using a arrow function is as follows:
class ActionComponent extends React.Component {
functionExam() {
console.log('The inner html was clicked.');
}
render() {
return (
<div onClick={()=>this.functionExam}>AAAAAAAAA</div>
);
}
}
Note :
- You can put any valid JavaScript expression inside the curly
braces in JSX
- React uses the camel case. So use onClick instead of onclick.
- Don't use innerHTML in react.
Try to make functionExam within the component(i.e function or class component) or at the parent level which can have access through props.
Please let me know weather I am up to the point of your question.