Restyle Restyled by prettier-markdown

src/pages/blog/react-state.md

@@ -11,30 +11,22 @@ show_author_bio: false
 cmseditable: true
 ---
 
-
 ## [Handling events](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state#handling_events "Permalink to Handling events")
 
 If you've only written vanilla JavaScript before now, you might be used to having a separate JavaScript file, where you query for some DOM nodes and attach listeners to them. For example:
 
 ```jsx
-const btn = document.querySelector('button');
+const btn = document.querySelector("button");
 
-btn.addEventListener('click', () => {
+btn.addEventListener("click", () => {
   alert("hi!");
 });
 ```
 
 In React, we write event handlers directly on the elements in our JSX, like this:
 
-
-
-
-
 ```jsx
-<button
-  type="button"
-  onClick={() => alert("hi!")}
->
+<button type="button" onClick={() => alert("hi!")}>
   Say hi!
 </button>
 ```
@@ -45,8 +37,8 @@ In the above example, we're adding an `onClick` attribute to the `<button>` elem
 
 The `onClick` attribute has special meaning here: it tells React to run a given function when the user clicks on the button. There are a couple of other things to note:
 
--   The camel-cased nature of `onClick` is important — JSX will not recognize `onclick` (again, it is already used in JavaScript for a specific purpose, which is related but different — standard [`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) handler properties).
--   All browser events follow this format in JSX – `on`, followed by the name of the event.
+- The camel-cased nature of `onClick` is important — JSX will not recognize `onclick` (again, it is already used in JavaScript for a specific purpose, which is related but different — standard [`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) handler properties).
+- All browser events follow this format in JSX – `on`, followed by the name of the event.
 
 Let's apply this to our app, starting in the `Form.js` component.
 
@@ -57,7 +49,7 @@ At the top of the `Form()` component function, create a function named `handleSu
 ```jsx
 function handleSubmit(e) {
   e.preventDefault();
-  alert('Hello, world!');
+  alert("Hello, world!");
 }
 ```
 
@@ -132,9 +124,9 @@ const [name, setName] = useState('Use hooks!');
 
 What's going on in this line of code?
 
--   We are setting the initial `name` value as "Use hooks!".
--   We are defining a function whose job is to modify `name`, called `setName()`.
--   `useState()` returns these two things, so we are using [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to capture them both in separate variables.
+- We are setting the initial `name` value as "Use hooks!".
+- We are defining a function whose job is to modify `name`, called `setName()`.
+- `useState()` returns these two things, so we are using [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to capture them both in separate variables.
 
 ### [Reading state](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state#reading_state "Permalink to Reading state")
 
@@ -488,4 +480,4 @@ function deleteTask(id) {
   const remainingTasks = tasks.filter(task => id !== task.id);
   setTasks(remainingTasks);
 }
-```
+```