From 283a57a3dfc2cc5e7b954eec500cc5b2811a4b7b Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 27 Oct 2016 13:06:09 +0100 Subject: [PATCH] Consistent CodePen links in docs --- docs/docs/conditional-rendering.md | 6 +++--- docs/docs/forms.md | 4 +++- docs/docs/lists-and-keys.md | 10 +++++----- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/docs/docs/conditional-rendering.md b/docs/docs/conditional-rendering.md index 5955e62fa8..c737206295 100644 --- a/docs/docs/conditional-rendering.md +++ b/docs/docs/conditional-rendering.md @@ -41,7 +41,7 @@ ReactDOM.render( ); ``` -[Try it out on CodePen.](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) +[Try it on CodePen.](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) This example renders a different greeting depending on the value of `isLoggedIn` prop. @@ -115,7 +115,7 @@ ReactDOM.render( ); ``` -[Try it out on CodePen.](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) 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. @@ -237,4 +237,4 @@ ReactDOM.render( ); ``` -[Try it out on CodePen.](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) diff --git a/docs/docs/forms.md b/docs/docs/forms.md index d7c06e33a9..51cec75ad5 100644 --- a/docs/docs/forms.md +++ b/docs/docs/forms.md @@ -4,7 +4,9 @@ title: Forms permalink: docs/forms.html prev: state-and-lifecycle.html next: lifting-state-up.html -redirect_from: "tips/controlled-input-null-value.html" +redirect_from: + - "tips/controlled-input-null-value.html" + - "docs/forms-zh-CN.html" --- HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name: diff --git a/docs/docs/lists-and-keys.md b/docs/docs/lists-and-keys.md index 14a346f617..c2b1527087 100644 --- a/docs/docs/lists-and-keys.md +++ b/docs/docs/lists-and-keys.md @@ -42,7 +42,7 @@ ReactDOM.render( ); ``` -[Try it out on CodePen.](https://codepen.io/gaearon/pen/GjPyQr?editors=0011) +[Try it on CodePen.](https://codepen.io/gaearon/pen/GjPyQr?editors=0011) This code displays a bullet list of numbers between 1 and 5. @@ -94,7 +94,7 @@ ReactDOM.render( ); ``` -[Try it out on CodePen.](https://codepen.io/gaearon/pen/jrXYRR?editors=0011) +[Try it on CodePen.](https://codepen.io/gaearon/pen/jrXYRR?editors=0011) ## Keys @@ -200,7 +200,7 @@ ReactDOM.render( ); ``` -[Try it out on CodePen.](https://codepen.io/rthor/pen/QKzJKG?editors=0010) +[Try it on CodePen.](https://codepen.io/rthor/pen/QKzJKG?editors=0010) A good rule of thumb is that elements inside the `map()` call need keys. @@ -244,7 +244,7 @@ ReactDOM.render( ); ``` -[Try it out on CodePen.](https://codepen.io/gaearon/pen/NRZYGN?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/NRZYGN?editors=0010) 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: @@ -294,6 +294,6 @@ function NumberList(props) { } ``` -[Try it out on CodePen.](https://codepen.io/gaearon/pen/BLvYrB?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/BLvYrB?editors=0010) 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).