React uses synthetic events to handle events from button, input and form elements. A synthetic event is a shell around the native DOM event with additional information for React.
Lets see the code where
- A> Initially I have a list as an array ‘initialList’
- B> And then add an item to that list by using a form element with input and button elements.
- C> In this case, a preventDefault is called on the event when submitting the form to prevent a browser reload/refresh.
import React from "react";
const initialList = ["Learn React", "Learn Firebase", "Learn GraphQL"];
const ListWithAddItem = () => {
const [value, setValue] = React.useState("");
const [list, setList] = React.useState(initialList);
const handleChange = event => {
setValue(event.target.value);
};
const handleSubmit = event => {
if (value) {
setList(list.concat(value));
}
setValue("");
event.preventDefault();
};
return (
<div>
<ul>
{list.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<form onSubmit={handleSubmit}>
<input type="text" value={value} onChange={handleChange} />
<button type="submit">Add Item</button>
</form>
</div>
);
};
export default ListWithAddItem;
Without a preventDefault() a form submission will reload the browser.
Because, all native HTML elements come with their internal native behavior. For instance, input elements store their internal state. That’s why often React is used to take over for having controlled components by managing the state via React.
Similarly a Form element which has a submit event that is invoked via a submit button element, in the past, was desired to refresh the browser to flush all state and to submit the data to a backend. But with React, it gives us more flexibility to deal with the submit event ourselves by invoking the preventDefault()
In another scenario, you may fetch data from a backend and store it in your component’s state. There is no native submission from the form expected anymore, that’s why the developer is able to take over.
In another scenario, you may fetch data from a backend and store it in your component’s state. There is no native submission from the form expected anymore, and the developer should be able to take over in this situation, so he shouldn’t need to worry about any undesired behavior of the browser.
Reading
Dr. Md. Harun Ar Rashid, MPH, MD, PhD, is a highly respected medical specialist celebrated for his exceptional clinical expertise and unwavering commitment to patient care. With advanced qualifications including MPH, MD, and PhD, he integrates cutting-edge research with a compassionate approach to medicine, ensuring that every patient receives personalized and effective treatment. His extensive training and hands-on experience enable him to diagnose complex conditions accurately and develop innovative treatment strategies tailored to individual needs. In addition to his clinical practice, Dr. Harun Ar Rashid is dedicated to medical education and research, writing and inventory creative thinking, innovative idea, critical care managementing make in his community to outreach, often participating in initiatives that promote health awareness and advance medical knowledge. His career is a testament to the high standards represented by his credentials, and he continues to contribute significantly to his field, driving improvements in both patient outcomes and healthcare practices.
