Home React Reference Event handling

Event handling

function

React events are camelCase and take a function. Use e.preventDefault() for forms. Avoid inline functions in loops.

Syntax

<button onClick={handler}> <form onSubmit={handleSubmit}>

Example

javascript

function Form() {
    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Submitted');
    };

    const handleChange = (e) => {
        console.log(e.target.name, e.target.value);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input name="email" onChange={handleChange} />
            <button type="submit">Submit</button>
        </form>
    );
}

List rendering