In any web application, typically used to have user interaction. When user interacts the events start functioning like mouse clicks, mouse hover, and change event and so on. Application must handle the event and execute the necessary code. Know more about event handling create functional component file or functional component using snippet like RFCE. Don’t add parenthesis after event handler function like “clickHandler” because it is a function not function call. https://www.ducatindia.com/javatraining/

1. WELCOME TO DUCAT INDIA
Language | Industrial Training | Digital Marketing | Web Technology | Testing+ | Dat
Networking | Mobile Application | ERP | Graphic | Big Data | Cloud Computing
React
Event
7070905090
info@ducatindia.com

2. React Event
In any web application, typically used to have user interaction. When user
interacts the events start functioning like mouse clicks, mouse hover, and
change event and so on. Application must handle the event and execute the
necessary code. Know more about event handling create functional
component file or functional component using snippet like RFCE. Don’t add
parenthesis after event handler function like “clickHandler” because it is a
function not function call.
When you click the mouse with that click many events occur in code as
follow-:
Following there is components code created for event handling-:

3. FunctionClick.j
s

4. So here button is created. The css button is
also created but focus on event only so how it
looks-:

5. So in above code ‘bgChange’ function is used so that when you click button
the background color will be changed. The function should also be called
above in “const”

6. So now when button is clicked then it shown in console according to
above written code. To use styling in same file “inline.css” is used.
< div style = {{ backgroundColor: “red”
}}>
If you want to change value of backgroundColor to some other using
state to save previous change then in functional components hooks are
used to write the state.
Const [bg, setBg] = useState();
Above expression is known as array destructuring. Here bg is used to
save state and setBg set updation of state, if you want change color to
purple using states and hooks then it is written as-:

7. Now new variable is created and in that setBg state is accessed. Now whatever
you will pass the value it will save in “bg”

8. Now if you want different events or states that is by clicking button some
other button text appears or some emoji you want to add then use
“setState” with respective properties as-:
To add emoji , with “OUCH!! Add emoji name”

9. Then after clicking it is
shown as-:

10. THANK YOU
React
Event
7070905090
info@ducatindia.com