[New Docs] Added: Lists & Conditional Rendering & Forms by ericnakagawa · Pull Request #7964 · facebook/react

ericnakagawa · 2016-10-13T01:22:23Z

No description provided.

aweary · 2016-10-13T02:05:48Z

docs/docs/loops-conditional-rendering.md

+
+### A Basic List
+
+To render an array or collection of objects into a list use the ES6 `map()`.


Array.map was part of ES5, not ES6

aweary · 2016-10-13T02:08:55Z

docs/docs/loops-conditional-rendering.md

+
+### A Basic List Using Keyed Components
+
+In this example we loop through a collection of objects, then pass props to a `Person` component. In our `map()` function we provide a second argument `index` that provides us with the current index of our loop. We use this index as our key, however more complex data benefits from a unique identifier (like a database object id).


It is slightly misleading to say that only complex data would benefit from unique identifiers as keys. If the order of the items could possibly change in any way, using the index as the key would be a bad idea.

Yes. We should explain clearly that you must always supply keys. If items never reorder you may use their index. Otherwise use a string representing identity of the data item you are rendering. Mention that keys must only be unique among their siblings.

I will rewrite this section to be clearer.

aweary · 2016-10-13T02:13:24Z

docs/docs/loops-conditional-rendering.md

+  );
+}
+```
+> Using a fat arrow function (`() => {}`) will automatically bind `this` to the function.


I think "arrow function" is more commonly used than "fat arrow function"

aweary · 2016-10-13T02:15:45Z

docs/docs/loops-conditional-rendering.md

+<ul>
+  <li>John</li> /* key: "John" */
+  <li>Fred</li> /* key: "Fred" */
+</ul>


Could you tie this back into the previous example with <Person/>? The markup is close to what that example would render, and I think it would be clearer.

In the <Person/> example you can just update the key to use person.name and update the text in the <li/> node here.

Good idea. I've swapped around data per your suggestion.

aweary · 2016-10-13T02:17:17Z

docs/docs/loops-conditional-rendering.md

+</ul>
+```
+
+As your components begin managing their own `this.state`, including keys becomes increasingly important to the performance of your application.


It's not clear how a component being stateful has any relation to keys.

Will rewrite this section.

aweary · 2016-10-13T02:19:40Z

docs/docs/loops-conditional-rendering.md

+
+In some cases, you will not want a component to render. To prevent components from rendering, return `null` or `false` from the `render()` function.
+
+In the example below, a `<WarningBanner />` component will not be rendered within a `<Header /> component.


Missing back tick after <Header />

Thanks for spotting. Fixed.

aweary · 2016-10-13T02:21:42Z

docs/docs/loops-conditional-rendering.md

+
+### Rendering Multiple Components Using {}
+
+You can build collections of components and render them using the `{}` operator.


It might be useful to first explain that {} lets you inline any JavaScript statement within JSX. This kind of implies that {} is used specifically for rendering collections of components.

Also I don't think {} is an operator. You can say "You can build collections of elements and include them in JSX with curly braces, just like you normally embed values in it." And you could link to "Introducing JSX" there.

gaearon · 2016-10-13T11:40:34Z

docs/docs/loops-conditional-rendering.md

+
+```javascript
+render() {
+  let persons = ['Ben', 'Chris', 'Dan', 'Paul', 'Tom'];


We went with using const for non changing data so let's do so consistently.

…k, copy changes

gaearon · 2016-10-13T11:42:37Z

docs/docs/loops-conditional-rendering.md

+      <ul>
+        {persons.map((person) => {
+          return (
+            <li>{person}</li>


This example, if ran as is, will print a warning about missing keys. Since this is the first section people might think that keys are optional. Can we either add keys here or mention that this example is incomplete and that they need to read the next section?

I've redone the example to include a key from beginning.

gaearon · 2016-10-13T11:45:31Z

docs/docs/loops-conditional-rendering.md

+
+### A Basic List Using Keyed Components
+
+In this example we loop through a collection of objects, then pass props to a `Person` component. In our `map()` function we provide a second argument `index` that provides us with the current index of our loop. We use this index as our key, however more complex data benefits from a unique identifier (like a database object id).


Yes. We should explain clearly that you must always supply keys. If items never reorder you may use their index. Otherwise use a string representing identity of the data item you are rendering. Mention that keys must only be unique among their siblings.

gaearon · 2016-10-13T11:46:37Z

docs/docs/loops-conditional-rendering.md

+
+To render an array or collection of objects into a list use the ES6 `map()`.
+
+```javascript


Can we just use functional components here like in earlier guides? There is no use of state or lifecycle methods so I don't quite see why classes are necessary.

Good call. I've rewrote as functional components to simplify.

gaearon · 2016-10-13T11:48:40Z

docs/docs/loops-conditional-rendering.md

+        <ul>
+          {persons.map((person, index) => {
+            return (
+              <Person key={index} name={person.name} color={person.color} />


I think this is not a very good example because people's names are not unique. Maybe could use login or account ID?

I removed this example.

gaearon · 2016-10-13T11:50:14Z

docs/docs/loops-conditional-rendering.md

+### Keys
+
+Use of a `key` can improve performance of your dynamic lists of child components by allowing reuse and reordering.
+


We shouldn't make it seem like keys are optional. React will complain loudly when you don't specify them. They are not just an optimization.

I've include keys from first React example.

gaearon · 2016-10-13T11:53:24Z

docs/docs/loops-conditional-rendering.md

+When a `key` is provided, React chooses the most performant method for updating the rendered objects.
+
+#### Example 1
+


I feel like starting with HTML is confusing here. React users almost never have to deal with HTML. Maybe say "DOM structure"?

Also, I'm worried this looks like code the user needs to write. We previously used code snippets to show JSX, and suddenly we jump to HTML representation without a preceding JSX code example.

gaearon · 2016-10-13T11:55:59Z

docs/docs/loops-conditional-rendering.md

+```html
+<ul>
+  <li>Fred</li> /* key: "Fred" */
+  <li style={display: 'none'}>Fred</li> /* key: removed */


I don't understand this part. React doesn't hide DOM nodes. If they key is removed, so is the DOM node.

The only reason keys exist is to establish identity of the same element across renders to track re-ordering. There is no special handling of keys later.

gaearon · 2016-10-13T11:58:58Z

docs/docs/loops-conditional-rendering.md

+This follows the concept of "separation of concerns" by allowing each component to manage how it should be rendered.
+
+### Component Variables
+


I want to make separation between components and elements clear. I tried to do this in all existing guides so far.

Components are classes or functions you define. Elements are things like <Foo /> that describe what you want to see on the screen.

In this example variables store elements, not components.

Going through now and updating terms -- hoping I got this right.

gaearon · 2016-10-13T12:00:04Z

docs/docs/loops-conditional-rendering.md

+LoginControl extends Component {
+  render() {
+    var loginButton;
+    if (loggedIn) {


Can you please make this a stateful component, read isLoggedIn from state, and toggle it on click? Otherwise it's not clear where that variable is coming from.

Converted this and another examples to be stateful.

lacker · 2016-10-15T00:26:34Z

docs/_data/nav_docs.yml

      title: Rendering Elements
    - id: components-and-props
      title: Components and Props
+    - id: lists-conditional-rendering


I think state should come before lists, but events should come before forms, so maybe interleave them:

state
lists
events
forms

?

Makes sense, rearranging.

lacker · 2016-10-15T00:27:38Z

docs/docs/lists-conditional-rendering.md

+    this.login = this.login.bind(this);
+    this.logout = this.logout.bind(this);
+  }
+  login () {


no space before the ()

this applies to a number of things through the code sample.

lacker · 2016-10-15T00:27:46Z

docs/docs/lists-conditional-rendering.md

+  login () {
+    this.setState({loggedIn: true,});
+  }
+  logout () {


no space before ()

Fixing all fn calls

lacker · 2016-10-15T00:28:34Z

docs/docs/lists-conditional-rendering.md

+
+```
+
+<a target="_blank" href="https://codepen.io/ericnakagawa/pen/Egpdrz?editors=0010">Try it out on JSFiddle.</a>


you say JSFiddle but you mean CodePen

Can we use consistent link format? I'm all for using for new tab but then we need to fix all other docs and make sure the link text is also the same.

lacker · 2016-10-15T00:30:39Z

docs/docs/lists-conditional-rendering.md

+
+Given the current state of your application you can assign elements as the value of variables, then only render the needed element.
+
+In the example below we determine which button to display to a potential user. We track state using `this.state.loggedIn` to simulate whether or not they are logged in. If the user is logged in then we want to render a `<LogoutButton />`, otherwise we want `<LoginButton />`. We use a variable `loginButton` to hold either element depending on the value of `this.state.loggedIn` until we render.


Could you make it into two sentences instead of the , otherwise ? E.g.

"In the example below we determine which button to display to a potential user. We track state using this.state.loggedIn to represent whether or not they are logged in. If the user is logged in then we want to render a <LogoutButton />, otherwise we want a <LoginButton />. We use a variable loginButton to hold either element, depending on the value of this.state.loggedIn."

lacker · 2016-10-15T00:31:30Z

docs/docs/lists-conditional-rendering.md

+
+When using prevening controls from being rendered a component must return only a single item. If you are returning multiple components, wrap them in `<div></div>`.
+
+### Rendering Multiple Components Using {}


This seems like the simplest content of all. Maybe this could go at the front, before using map?

Moving this to top.

gaearon · 2016-10-15T10:42:08Z

docs/docs/lists-conditional-rendering.md

+```
+
+<a target="_blank" href="https://codepen.io/ericnakagawa/pen/wzxEmv/?editors=0011">Try it out on Codepen.</a>
+


Sorry for duplicate comments. GitHub doesn't show my comments on older threads.

Can we use consistent link format? I'm all for using for new tab but then we need to fix all other docs and make sure the link text is also the same.

Switched to normal links.

gaearon · 2016-10-15T10:43:50Z

docs/docs/lists-conditional-rendering.md

+
+First, let's talk about transforming lists in Javascript.
+
+Given the code below, we use the `map()` function to take an array of `numbers`, double their values, and then output them to a new array `doubled`.


Can you please make map link to Array.map on MDN?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Removed link at end and moved link to map().

gaearon · 2016-10-15T10:46:27Z

docs/docs/lists-conditional-rendering.md

+
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+numbers.map((number) => number * 2); // outputs: [2, 4, 6, 8 10]


It's not obvious that this returns an array but this is crucial to understanding.

Can we make it

const numbers = ...
const doubled = ...

Or similar?

I had something similar prior. Adding back.

gaearon · 2016-10-15T10:49:52Z

docs/docs/lists-conditional-rendering.md

+numbers.map((number) => number * 2); // outputs: [2, 4, 6, 8 10]
+```
+
+In React, transforming arrays into lists of elements is nearly identical.


Let's make "elements" a link to "rendering elements"?

This would really benefit from the same two-liner

const numbers = ...
const listItems = ...

Applied second array in first 3 examples.

gaearon · 2016-10-15T10:51:04Z

docs/docs/lists-conditional-rendering.md

+
+A component must return only a single item. If you are returning multiple elements, wrap them in `<div></div>`.
+
+Here we take our list of `numbers` and generate a collection of `<li>` elements. We are using the plain Javascript `map()` function. Learn more about it <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">here</a>.


Oh, I see you link to map here. I would probably link in both places.

gaearon · 2016-10-15T10:51:52Z

docs/docs/lists-conditional-rendering.md

+Here we take our list of `numbers` and generate a collection of `<li>` elements. We are using the plain Javascript `map()` function. Learn more about it <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">here</a>.
+
+```javascript
+class Numbers extends React.Component {


Can you please write this as functional component instead? It doesn't use state or lifecycle so it doesn't need to be a class. You can find examples of functional components in "components and props" guide.

The Codepen is written in a Functional Component, this example wasn't updated properly. Fixed.

gaearon · 2016-10-15T11:17:41Z

docs/docs/lists-conditional-rendering.md

+    return (
+      <div>
+        {warningBanner}
+        <button onClick={this.toggleWarning}>{this.state.toggleText}</button>


Can you please split this into three lines for readability?

gaearon · 2016-10-15T11:19:03Z

docs/docs/lists-conditional-rendering.md

+
+### Rendering Multiple Components Using {}
+
+You can build collections of components and include them in <a target="_blank" href="/react/docs/introducing-jsx.html">JSX</a> with curly braces `{}` just as you would embed values with Javascript.


"collections of elements", not components.
"Rendering Multiple Components" is fine because you get components as a result, but whenever we talk about manipulating JSX we always talk about the elements.

gaearon · 2016-10-15T11:19:38Z

docs/docs/lists-conditional-rendering.md

+
+<a target="_blank" href="https://codepen.io/ericnakagawa/pen/ozragV?editors=0011#0">Try it out on Codepen.</a>
+
+### Rendering Multiple Components Using {}


Can we skip "using {}" in the title?

gaearon · 2016-10-15T11:30:15Z

docs/docs/lists-conditional-rendering.md

+
+function Number(props) {
+  let numbers = [];
+  numbers.push(<Number value="1" />)


This example will print React key warnings. It also gives a false impression that you would often write render this way (in practice I almost never saw push() usage in render).

Another confusing thing about it is it seems like a "special case" because it is separated from other sections but it is showing exact same technique as we used before: embedding arrays of elements.

Instead of a separate section I would make it a first step in the "loops" section.
First loops should show

const numbers = ... const doubled = ...

The it should show

const numbers = ... const listItems = numbers.map(...) ReactDOM.render(<ul>{listItems}</ul>, ...)

Then it should show component:

function NumberList(props) { const numbers = props.numbers const listItems = numbers.map(...) return <ul>{listItems}</ul> } const numbers = ... ReactDOM.render(<NumberList numbers={...}, ...)

And only then show the "inline" notation

function NumberList(props) { const numbers = props.numbers return ( <ul> {numbers.map(...)} </ul> ) }

This way we do exactly single step every time, and it's easy to keep track of what's changing and at the same time understand that it's just JavaScript.

As final step you could extract a Number component and use that to demonstrate key stays inside map.

Moved Multiple Component example to top, and followed your guide for introducing each level.

gaearon · 2016-10-15T11:31:22Z

docs/docs/lists-conditional-rendering.md

+  var loggedIn = false;
+  return (
+    <div>
+      The user is <strong>{(loggedIn)?'currently':'not'}</strong> logged in.


Please remove extra parens and add whitespace before and after ? and :

gaearon

Overall I'm really happy with how it's going. Leaving a few comments

gaearon · 2016-10-18T00:32:11Z

docs/docs/lists-conditional-rendering.md

+```javascript{11}
+function NumberList(props) {
+  const numbers = props.numbers
+  const listItems = numbers.map((item) => <li key={"item-" + item}>{item}</li>);


As soon as one-liners get a little crowdy it's best to add some whitespace

stuff = numbers.map((item) => <li stuff> {moreStuff} </li> )

Adding white space to these.

gaearon · 2016-10-18T00:33:04Z

docs/docs/lists-conditional-rendering.md

+}
+
+const numbers = [1, 2, 3, 4, 5];
+ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById('root'));


Same here, could

render( <Stuff />, stuff );

breaking this apart, too.

gaearon · 2016-10-18T00:39:12Z

docs/docs/lists-conditional-rendering.md

+
+Use keys that represent the identity of the item. If you don't have a way to uniquely identify each item consider using a string representation of the item. _You will be warned if you don't include keys._
+
+Supply keys to elements inside a `map()` function and not directly to an HTML element. Keys used within groups should be unique to each other. Keys cannot be accessed as a `prop`.


The problem is not that it's "directly to an HTML element". (This could actually be a component element too and the rule would still apply.)

Maybe say "Keys should be given to the elements inside the array because they give the elements a stable identity. If you extract a Number component, you should keep the key on the <Number /> elements in the array rather than on the root <li> element in the Number itself."

"Keys cannot be accessed as a prop" => "This is why keys are not props. They 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."

Also this section is not essential and could be mentioned below.

Copy changed.

gaearon · 2016-10-18T00:41:49Z

docs/docs/lists-conditional-rendering.md

+    this.login = this.login.bind(this);
+    this.logout = this.logout.bind(this);
+  }
+  login() {


Maybe call them handleLoginClick and handleLogoutClick to match the most common convention

gaearon · 2016-10-18T00:42:11Z

docs/docs/lists-conditional-rendering.md

+[Try it out on Codepen.](https://codepen.io/ericnakagawa/pen/Egpdrz?editors=0010)
+
+
+### Prevent Component Rendering


Nit: Preventing

gaearon · 2016-10-18T00:42:40Z

docs/docs/lists-conditional-rendering.md

+
+To prevent components from rendering, return `null` or `false` from the `render()` function.
+
+In the example below, the `<WarningBanner/>` is rendered depending on the value of the prop `warn`. If the value of the prop is false, then the component does not render.


Nit: space before self closing tag slash

gaearon · 2016-10-18T00:48:35Z

docs/docs/lists-conditional-rendering.md

+
+### Prevent Component Rendering
+
+To prevent components from rendering, return `null` or `false` from the `render()` function.


Maybe start as "A component may also prevent its own rendering."

It's not quite clear when you'd use each pattern so I'm not sure if it's worth diving into this here at all. But it's good to have an example somewhere so might as well be here.

But I think a ternary should be explained first as it's a more common pattern. Or at least you should explain {someCondition && <Stuff />} first. It is way more common that parent decides which children to render, than a component decides to not render itself.

Moved ternary up.

I added an example to Conditional Rendering.

gaearon

Accepting with nits. Please keep the style consistent with all other code examples. We keep semicolons, try to split lines when they're too crowdy, use const and let over var.

gaearon · 2016-10-19T20:34:45Z

docs/docs/lists-conditional-rendering.md

+    <li>
+      {item}
+    </li>
+  )


Missing semicolon

gaearon · 2016-10-19T20:34:50Z

docs/docs/lists-conditional-rendering.md

+  <li>
+    {item}
+  </li>
+)


Missing semicolon

gaearon · 2016-10-19T20:35:04Z

docs/docs/lists-conditional-rendering.md

+      {item}
+    </li>
+  )
  return <ul>{listItems}</ul>


Missing semicolon

gaearon · 2016-10-19T20:35:21Z

docs/docs/lists-conditional-rendering.md

+    <li key={"item-" + item}>
+      {item}
+    </li>
+  )


Missing semicolon

gaearon · 2016-10-19T20:35:23Z

docs/docs/lists-conditional-rendering.md

-```javascript{11}
+```javascript{4}
 function NumberList(props) {
  const numbers = props.numbers


Missing semicolon

gaearon · 2016-10-19T20:39:21Z

docs/docs/lists-conditional-rendering.md

+  return <div>Please sign up.</div>
+}
+function VisitorMessage(props) {
+  var loggedIn = true; // change this to false


Please no var, only const or let.

gaearon · 2016-10-19T20:39:58Z

docs/docs/lists-conditional-rendering.md

+```
+
+[Try it out on Codepen](https://codepen.io/ericnakagawa/pen/WGaKLy?editors=0011#0)
+


Note that && is regular JS operator, and this works because React ignores false/null in render output.

gaearon · 2016-10-19T20:40:19Z

docs/docs/lists-conditional-rendering.md

+  var loggedIn = false;
+  return (
+    <div>
+      The user is <strong>{loggedIn?'currently':'not'}</strong> logged in.


Please put spaces before and after ? and :

gaearon · 2016-10-19T20:40:38Z

docs/docs/lists-conditional-rendering.md

+}
+```

 ### Prevent Component Rendering


"Preventing" for title, not "Prevent", as it's a noun

gaearon · 2016-10-19T20:41:14Z

docs/docs/lists-conditional-rendering.md

+In the example below, the `<WarningBanner />` is rendered depending on the value of the prop `warn`. If the value of the prop is false, then the component does not render.

 The highlighted lines below show where the component `<WarningBanner />` returns null and the component isn't rendered.



Please don't use this style:

if(!props.warn) return null;

Instead:

if (!props.warn) { return null; }

Outdated

ericnakagawa added 2 commits October 12, 2016 17:29

Adds - Loops and Conditional Rendering

e1da543

Merge branch 'new-docs' of github.com:facebook/react into new-docs

0d16d45

ericnakagawa changed the title ~~Added: Loops & Components~~ Added: Loops & Conditional Rendering Oct 13, 2016

facebook-github-bot added GH Review: review-needed CLA Signed labels Oct 13, 2016

aweary reviewed Oct 13, 2016

View reviewed changes

aweary previously requested changes Oct 13, 2016

View reviewed changes

gaearon reviewed Oct 13, 2016

View reviewed changes

const for unchanging data, reusing same data from examples, fixed tic…

83b8039

…k, copy changes

gaearon reviewed Oct 13, 2016

View reviewed changes

hramos changed the title ~~Added: Loops & Conditional Rendering~~ [New Docs] Added: Loops & Conditional Rendering Oct 15, 2016

Rewrote parts of Lists & Conditional Rendering, added codepen examples

aa32f91

ericnakagawa changed the title ~~[New Docs] Added: Loops & Conditional Rendering~~ [New Docs] Added: Lists & Conditional Rendering Oct 15, 2016

facebook-github-bot added the CLA Signed label Oct 15, 2016

lacker reviewed Oct 15, 2016

View reviewed changes

ericnakagawa added 3 commits October 14, 2016 17:35

Fixes, and moving copy around

9d1c5e4

Rewording

14973d0

Added additional wording for clarity

d473a20

gaearon reviewed Oct 15, 2016

View reviewed changes

gaearon requested changes Oct 15, 2016

View reviewed changes

ericnakagawa added 2 commits October 17, 2016 12:27

Changed links back to normal

0614423

Fixed multiple issues and took multiple suggestions from @gaearon

bab84f0

gaearon reviewed Oct 18, 2016

View reviewed changes

ericnakagawa added 2 commits October 18, 2016 13:23

Final fixes.

9c4106d

Forms - includes several codepen examples at bottom.

25b3ec8

ericnakagawa changed the title ~~[New Docs] Added: Lists & Conditional Rendering~~ [New Docs] Added: Lists & Conditional Rendering & Forms Oct 18, 2016

gaearon reviewed Oct 19, 2016

View reviewed changes

gaearon approved these changes Oct 19, 2016

View reviewed changes

ericnakagawa added 2 commits October 20, 2016 10:41

Formatting fixes.

cd27671

Merge branch 'new-docs' of github.com:facebook/react into new-docs

bac4fa5

ericnakagawa merged commit 801d726 into facebook:new-docs Oct 20, 2016


		### A Basic List

		To render an array or collection of objects into a list use the ES6 `map()`.


		### A Basic List Using Keyed Components

		In this example we loop through a collection of objects, then pass props to a `Person` component. In our `map()` function we provide a second argument `index` that provides us with the current index of our loop. We use this index as our key, however more complex data benefits from a unique identifier (like a database object id).


		In some cases, you will not want a component to render. To prevent components from rendering, return `null` or `false` from the `render()` function.

		In the example below, a `<WarningBanner />` component will not be rendered within a `<Header /> component.


		### Rendering Multiple Components Using {}

		You can build collections of components and render them using the `{}` operator.


		To render an array or collection of objects into a list use the ES6 `map()`.

		```javascript

		### Keys

		Use of a `key` can improve performance of your dynamic lists of child components by allowing reuse and reordering.

		When a `key` is provided, React chooses the most performant method for updating the rendered objects.

		#### Example 1

		This follows the concept of "separation of concerns" by allowing each component to manage how it should be rendered.

		### Component Variables


		```

		<a target="_blank" href="https://codepen.io/ericnakagawa/pen/Egpdrz?editors=0010">Try it out on JSFiddle.</a>


		Given the current state of your application you can assign elements as the value of variables, then only render the needed element.

		In the example below we determine which button to display to a potential user. We track state using `this.state.loggedIn` to simulate whether or not they are logged in. If the user is logged in then we want to render a `<LogoutButton />`, otherwise we want `<LoginButton />`. We use a variable `loginButton` to hold either element depending on the value of `this.state.loggedIn` until we render.


		When using prevening controls from being rendered a component must return only a single item. If you are returning multiple components, wrap them in `<div></div>`.

		### Rendering Multiple Components Using {}


		First, let's talk about transforming lists in Javascript.

		Given the code below, we use the `map()` function to take an array of `numbers`, double their values, and then output them to a new array `doubled`.


		A component must return only a single item. If you are returning multiple elements, wrap them in `<div></div>`.

		Here we take our list of `numbers` and generate a collection of `<li>` elements. We are using the plain Javascript `map()` function. Learn more about it <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">here</a>.


		Use keys that represent the identity of the item. If you don't have a way to uniquely identify each item consider using a string representation of the item. _You will be warned if you don't include keys._

		Supply keys to elements inside a `map()` function and not directly to an HTML element. Keys used within groups should be unique to each other. Keys cannot be accessed as a `prop`.

		[Try it out on Codepen.](https://codepen.io/ericnakagawa/pen/Egpdrz?editors=0010)


		### Prevent Component Rendering


		To prevent components from rendering, return `null` or `false` from the `render()` function.

		In the example below, the `<WarningBanner/>` is rendered depending on the value of the prop `warn`. If the value of the prop is false, then the component does not render.

		```

		[Try it out on Codepen](https://codepen.io/ericnakagawa/pen/WGaKLy?editors=0011#0)

		In the example below, the `<WarningBanner />` is rendered depending on the value of the prop `warn`. If the value of the prop is false, then the component does not render.

		The highlighted lines below show where the component `<WarningBanner />` returns null and the component isn't rendered.

Conversation

ericnakagawa commented Oct 13, 2016

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gaearon Oct 13, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gaearon Oct 13, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

gaearon Oct 13, 2016 •

edited

Loading

gaearon Oct 13, 2016 •

edited

Loading