Home
Basics
Introduction Setting up environment First Component JSX Component lifecycle Class Based Components Function Based Components Props State Hooks useState hook useEffect hook Events Server requests CSS in React Router third party JavaScriptAdvanced
useContext hook useRef hook useReducer hook Memo useCallback hook Custom Hooks React and ReduxMiscellaneous
React Third Party Components Html templates in React React Interview QnAEvents in react
Below example demonstrates how to create event handlers in react function component. In this example, we have handled click event and you can handle other events in similar way.
import React, { useState } from "react";
import "./styles.css";
export default function Main() {
let [count, setCount] = useState(0);
let clickIncrement = () => {
setCount((prevCount) => {
return ++prevCount;
});
};
let clickDecrement = () => {
setCount((prevCount) => {
return --prevCount;
});
};
return (
<div className="Main">
<div>{count}</div>
<button onClick={clickIncrement}>Increment</button>
<button onClick={clickDecrement}>Decrement</button>
</div>
);
}
Web development and Automation testing
solutions delivered!!