Quick Contact


    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-:

    FunctionClick.js
    		Import React from ‘react’
    		Function FunctionClick() {
              Function clickHandler() {
               Console.log (‘button clicked’)
        	   )
    		Return (
       			< div>
       			< button onClick={clickHandler()}>Click< /button>
       			< /div>
    	 		}
    		}
    		Export default FunctionClick
    		Click a button is an event. Let see in brief-:
    		Import react from ‘react’;
    		To use multiple keywords return is used-:
    		Import React from ‘react’;
    		Const App = () => {
    		     Return (
    		< >
    		< div>
    		< button>Click me< /button>
    		< /div>
    		
    		);
    		}
    	

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

    		Import React from ‘react’;
    		Const App = () => {
    		Const bgChange = () =>{
    		   Console.log(“clicked”);
    		}
    		     Return (
    		< >
    		< div>
    		< button onClick = {bgChange}>Click me< /button>
    		< /div>
    		
    		);
    		}	
    	

    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”

    react-event
    react-event

    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-:

    react-event

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

    react-event

    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-:

    react-event

    To add emoji , with “OUCH!! Add emoji name”

    react-event

    Then after clicking it is shown as-:

    react-event

    Copyright 1999- Ducat Creative, All rights reserved.