Skip to content

Commit 7475f1c

Browse files
committed
Fixed JSX code blocks
1 parent d3ddf41 commit 7475f1c

File tree

2 files changed

+8
-9
lines changed

2 files changed

+8
-9
lines changed

.canvas

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,3 @@
44
:course_id: 3264
55
:canvas_url: https://learning.flatironschool.com/courses/3264/assignments/68037
66
:type: assignment
7-

README.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ to build out this feature.
8282
Any time we need state in a component, we need to use the `useState` hook from
8383
React. We can import it like so:
8484

85-
```js
85+
```jsx
8686
import React, { useState } from "react";
8787
```
8888

@@ -91,7 +91,7 @@ import React, { useState } from "react";
9191
To create a state variable in our component, we need to call `useState` and
9292
provide an initial value:
9393

94-
```js
94+
```jsx
9595
function Toggle() {
9696
const [isOn, setIsOn] = useState(false);
9797
// ... the rest of Toggle component
@@ -107,7 +107,7 @@ We're setting the initial state here as `false`, because the button should be
107107
Now that we have this new variable, it's time to use it! We can use the `isOn`
108108
variable to determine what text to display in the button:
109109

110-
```js
110+
```jsx
111111
<button>{isOn ? "ON" : "OFF"}</button>
112112
```
113113

@@ -127,7 +127,7 @@ update. In our case it's the button being clicked.
127127

128128
Let's start by adding an `onClick` handler to the button:
129129

130-
```js
130+
```jsx
131131
<button onClick={handleClick}>{isOn ? "ON" : "OFF"}</button>
132132
```
133133

@@ -136,7 +136,7 @@ we must call the _setter function_ to update our state variable. Trying to
136136
update the variable directly won't have any effect (even if we changed our
137137
variable declaration to `let` instead of `const`):
138138

139-
```js
139+
```jsx
140140
let [isOn, setIsOn] = useState(false);
141141
function handleClick() {
142142
// updating state directly is a no-no!
@@ -146,15 +146,15 @@ function handleClick() {
146146

147147
So the way we should update state looks like this:
148148

149-
```js
149+
```jsx
150150
function handleClick() {
151151
setIsOn((isOn) => !isOn);
152152
}
153153
```
154154

155155
All together, here's our updated component:
156156

157-
```js
157+
```jsx
158158
function Toggle() {
159159
const [isOn, setIsOn] = useState(false);
160160

@@ -171,7 +171,7 @@ function Toggle() {
171171
With this state variable in place, let's add another feature to our button. When
172172
the button is ON, let's make the background red, like this:
173173

174-
```js
174+
```jsx
175175
<button style={{ background: "red" }}>
176176
```
177177

0 commit comments

Comments
 (0)