@samitouri / QOS-React / commits / a4b9abff42

Consistent CodePen links in docs

Dan Abramov committed Oct 27, 2016 at 13:06 UTC a4b9abff425eee51f7456e2eaea7e2c0622ebb61

3 files changed +12 -12

docs/docs/conditional-rendering.md

+3 -3

@@ -42,7 +42,7 @@ ReactDOM.render(

42 );

43 ```

45 -[Try it out on CodePen.](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)

45 +[Try it on CodePen.](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)

47 This example renders a different greeting depending on the value of `isLoggedIn` prop.

@@ -116,7 +116,7 @@ ReactDOM.render(

116 );

117 ```

118

119 -[Try it out on CodePen.](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)

119 +[Try it on CodePen.](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)

120

121 While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.

122

@@ -238,4 +238,4 @@ ReactDOM.render(

238 );

239 ```

240

241 -[Try it out on CodePen.](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)

241 +[Try it on CodePen.](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)

docs/docs/forms.md

+4 -4

@@ -302,7 +302,7 @@ ReactDOM.render(

302 );

303 ```

304

305 -[Try it out on CodePen.](https://codepen.io/gaearon/pen/JRVaYB?editors=0010)

305 +[Try it on CodePen.](https://codepen.io/gaearon/pen/JRVaYB?editors=0010)

306

307 ### Controlled Textarea

308

@@ -346,7 +346,7 @@ ReactDOM.render(

346 );

347 ```

348

349 -[Try it out on CodePen.](https://codepen.io/gaearon/pen/NRmLxN?editors=0010)

349 +[Try it on CodePen.](https://codepen.io/gaearon/pen/NRmLxN?editors=0010)

350

351 ### Controlled Select

352

@@ -389,7 +389,7 @@ ReactDOM.render(

389 );

390 ```

391

392 -[Try it out on CodePen.](https://codepen.io/gaearon/pen/qawrbr?editors=0010)

392 +[Try it on CodePen.](https://codepen.io/gaearon/pen/qawrbr?editors=0010)

393

394 ### Uncontrolled Radio Button

395

@@ -456,7 +456,7 @@ ReactDOM.render(

456 );

457 ```

458

459 -[Try it out on CodePen.](https://codepen.io/gaearon/pen/ozOPLJ?editors=0010)

459 +[Try it on CodePen.](https://codepen.io/gaearon/pen/ozOPLJ?editors=0010)

460

461 ### Uncontrolled Checkbox

462

docs/docs/lists-and-keys.md

+5 -5

@@ -42,7 +42,7 @@ ReactDOM.render(

42 );

43 ```

45 -[Try it out on CodePen.](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)

45 +[Try it on CodePen.](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)

47 This code displays a bullet list of numbers between 1 and 5.

@@ -94,7 +94,7 @@ ReactDOM.render(

94 );

95 ```

97 -[Try it out on CodePen.](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)

97 +[Try it on CodePen.](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)

99 ## Keys

100

@@ -200,7 +200,7 @@ ReactDOM.render(

200 );

201 ```

202

203 -[Try it out on CodePen.](https://codepen.io/rthor/pen/QKzJKG?editors=0010)

203 +[Try it on CodePen.](https://codepen.io/rthor/pen/QKzJKG?editors=0010)

204

205 A good rule of thumb is that elements inside the `map()` call need keys.

206

@@ -244,7 +244,7 @@ ReactDOM.render(

244 );

245 ```

246

247 -[Try it out on CodePen.](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)

247 +[Try it on CodePen.](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)

248

249 Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:

250

@@ -294,6 +294,6 @@ function NumberList(props) {

294 }

295 ```

296

297 -[Try it out on CodePen.](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)

297 +[Try it on CodePen.](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)

298

299 Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/react/docs/components-and-props.html#extracting-components).