From 747de7347d1876f01323b48fbeda135c6f4da1df Mon Sep 17 00:00:00 2001
From: Daniel Herzog <daniel.herzog@gmail.com>
Date: Mon, 26 Jun 2017 23:33:15 +0200
Subject: [PATCH] Add a label to the 'toggle-all' checkbox

Because of the styles in todomvc-app-css it doesn't show up without one.
---
 examples/todomvc/components/MainSection.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/examples/todomvc/components/MainSection.js b/examples/todomvc/components/MainSection.js
index 68898577..4ecc1ddf 100644
--- a/examples/todomvc/components/MainSection.js
+++ b/examples/todomvc/components/MainSection.js
@@ -15,10 +15,13 @@ export default class MainSection extends Component {
     todos: PropTypes.array.isRequired,
     actions: PropTypes.object.isRequired
   };
+  // Keep a counter that can be used to create an html `id` attribute.
+  static mountCount = 0;
 
   constructor(props, context) {
     super(props, context);
     this.state = { filter: SHOW_ALL };
+    this.htmlFormInputId = `toggle-all-${MainSection.mountCount++}`;
   }
 
   handleClearMarked() {
@@ -57,12 +60,17 @@ export default class MainSection extends Component {
 
   renderToggleAll(markedCount) {
     const { todos, actions } = this.props;
+
     if (todos.length > 0) {
       return (
-        <input className='toggle-all'
-               type='checkbox'
-               checked={markedCount === todos.length}
-               onChange={actions.markAll} />
+        <div>
+          <input id={this.htmlFormInputId}
+                 className='toggle-all'
+                 type='checkbox'
+                 checked={markedCount === todos.length}
+                 onChange={actions.markAll} />
+          <label htmlFor={this.htmlFormInputId}>Mark all as complete</label>
+        </div>
       );
     }
   }