In React, some of the most common event handlers that are used frequently are:

1. onClick - used for handling click events on elements like buttons, links, etc.

   javascript
    
    
   Copy code
   <button onClick={handleClick}>Click Me</button>
   

2. onChange - used for handling input changes such as typed text or selected option values.

   javascript
    
    
   Copy code
   <input type="text" onChange={handleChange} />
   <select onChange={handleSelect}>
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   </select>
   

3. onSubmit - used for handling form submissions.

   javascript
    
    
   Copy code
   <form onSubmit={handleSubmit}>
   <input type="text" />
   <button type="submit">Submit</button>
   </form>
   

These are just a few examples of the many event handlers available in React. You can find more information on React events in the official documentation: https://reactjs.org/docs/events.html

React.js Code:

jsx
 
 
Copy code
import React, { useState } from 'react';

const ProductPage = () => {
  const [selectedSize, setSelectedSize] = useState('S');
  const [selectedPrice, setSelectedPrice] = useState(10);

  const handleSizeChange = (e) => {
    setSelectedSize(e.target.value);
    if (e.target.value === 'S') {
      setSelectedPrice(10);
    } else if (e.target.value === 'M') {
      setSelectedPrice(15);
    } else if (e.target.value === 'L') {
      setSelectedPrice(20);
    }
  }

  return (
    <div className="product-page">
      <div className="product-image-container">
        <img src="image1.jpg" alt="Product Image" />
        <img src="image2.jpg" alt="Product Image" />
      </div>
      <div className="product-details">
        <h1>Product Name</h1>
        <p>Price: ${selectedPrice}</p>
        <label htmlFor="size-select">Size:</label>
        <select id="size-select" value={selectedSize} onChange={handleSizeChange}>
          <option value="S">Small</option>
          <option value="M">Medium</option>
          <option value="L">Large</option>
        </select>
        <button>Add to Cart</button>
      </div>
    </div>
  );
};

export default ProductPage;

Explanation:

• We use useState hook to manage the selected size and price of the product.
• We listen to the changes in the size selection using the onChange event and update the selected size and price accordingly using the setSelectedSize and setSelectedPrice functions.
• We display the product image(s), product name, price, size selection dropdown, and an Add to Cart button.
• The price displayed changes depending on the selected size.
• The user can see more than one product image.

The older syntax for the code mentioned would be:

js
 
 
Copy code
onChange={function(e){ setValue(e.target.value) }}

JavaScript events are triggers that initiate the execution of JavaScript code when a certain action occurs. Examples of actions that can trigger events include clicking a button, pressing a key, scrolling the page, hovering over an element, and submitting a form.

For example, when a user clicks a button, a click event is triggered. A keypress event is triggered when a user presses a key. Other events such as scroll, mousemove, focus, and blur, are also triggered when a user interacts with a web page.

In order to use JavaScript events, you must define a function in the code that will be executed when the event action occurs. This is known as an event handler. Some common JavaScript events and their event handlers include onclick, onchange, onkeypress, onmouseover, onsubmit, onfocus, and onblur. For example, to run a function when a user clicks a button, you would use the onclick event handler.

js
 
 
Copy code
document.getElementById("myButton").onclick = myFunction;

function myFunction() {
  console.log("The button was clicked!");
}