Categories
28°C, New York
Home ReactJS React Events Example

React Events Example

React Event Object

This example demonstrates the implementation of Event Handler in React.

Javascript




// Filename - App.js
 
import { useState } from "react";
import "./App.css";
function App() {
    const [inp, setINP] = useState("");
    const [name, setName] = useState("");
    const clk = () => {
        setName(inp);
        setINP("");
    };
    return (
        <div className="App">
            <h1>w3wiki</h1> \
            {name ? <h2>Your Name:{name}</h2> : null}
            <input
                type="text"
                placeholder="Enter your name..."
                onChange={(e) => setINP(e.target.value)}
                value={inp}
            />
            <button onClick={clk}>Save</button>{" "}
        </div>
    );
}
export default App;
 






                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													

													
													
												

												
											

											
											

												
React Events

												
												

													
													
React Events are user interactions with the web application, such as clicks, keyboard input, and other actions that trigger a response in the user interface.  Just like HTML DOM, React also acts upon the events.

													
													
												

												
												

													
													


Table of Content


    

  • React Events
    • 

  • Commonly Used React Events
    • 

  • Adding React Events
    • 

  • Passing Arguments in React Events
    • 

  • React Event Object
    • 




													
													
												

												
											

										


										
										

											
Similar Reads

											
											

												
													

														React Events

													

														React events are the actions due to user interaction or system events. React allows developers to handle these events using a declarative approach, making it easier to create interactive and dynamic user interfaces....
													

												
											

											
											

												
													

														Commonly Used React Event Handlers:

													

														...
													

												
											

											
											

												
													

														Adding React Events

													

														React events syntax is in camelCase, not lowercase. If we need to set events in our code, we have to pass them, just like props or attributes, to JSX or HTML. We have to pass a function regarding the process we want to do on fire of this event....
													

												
											

											
											

												
													

														Passing Arguments in React Events

													

														In React Events, we pass arguments with the help of arrow functions. Like functions, we create parenthesis and pass arguments, but here it is not possible; we have to use an arrow function to pass arguments....
													

												
											

											
											

												
													

														React Event Object

													

														React Events handlers have an object called Events, which contains all the details about the event, like type, value, target, ID, etc. So we can pass that event as an argument and use that event object in our function....
													

												
											

											
											

												
													

														React Events Example:

													

														This example demonstrates the implementation of Event Handler in React....
													

												
											

											
										


									

									

										
Tags:

										
										#React Events
										
										#ReactJS
										
										#Web Technologies
										

									

									

										

											
											
												
												React Event Object