Spoilers -- Answer Key

I like the idea behind ReactJS Koans but the wording of some of the questions left me scratching my head and the tests don’t exactly ensure correctness. It would have been nice to compare my answers with known correct ones.

So, FWIW, here are the answers I came up with.

Happy to convert this into a pull request if desired.

diff --git a/koans/es6/01-HelloWorld.jsx b/koans/es6/01-HelloWorld.jsx
index 1590b81..9634709 100644
--- a/koans/es6/01-HelloWorld.jsx
+++ b/koans/es6/01-HelloWorld.jsx
@@ -23,7 +23,7 @@ class HelloWorld extends React.Component {

   render() {
     return (
-        <div>FILL ME IN!</div>
+        <span>Hello World</span>
     );
   }
 }
diff --git a/koans/es6/02-PartiesList.jsx b/koans/es6/02-PartiesList.jsx
index 7eb9329..391d12d 100644
--- a/koans/es6/02-PartiesList.jsx
+++ b/koans/es6/02-PartiesList.jsx
@@ -11,8 +11,9 @@ class PartiesList extends React.Component {
   // Doesn't this code look familiar to you?
   render() {
     return (
-      <ul className="FILL ME">
+      <ul className="parties-list">
         <li>Party at Aperture Laboratories</li>
+        <li>Party at Lawrence Livermore Laboratories</li>
       </ul>
     );
   }
diff --git a/koans/es6/03-WhatsYourName.jsx b/koans/es6/03-WhatsYourName.jsx
index af7cef2..cf2e435 100644
--- a/koans/es6/03-WhatsYourName.jsx
+++ b/koans/es6/03-WhatsYourName.jsx
@@ -75,14 +75,15 @@ class WhatsYourName extends React.Component {
   // Hint: use `console.log` to check `event.target`. You will find text
   //       entered to the input there.
   onNameChange(event) {
-    // Huh... There's something wrong here...
-    this.setState({bad_attribute: "ChangeME!"});
+    this.setState({name: event.target.value});
   }

   render() {
+    var howdy = "Hello " + this.state.name;
+    if(this.state.name.length <= 0) howdy = "Hey there. Enter your name."
     return (
       <div>
-        <p>Hello {this.state.name}</p>
+        <p>{howdy}</p>
         <input type="text" name="name" onChange={this.onNameChange} />
       </div>
     );
diff --git a/koans/es6/04-Quiz.jsx b/koans/es6/04-Quiz.jsx
index 5c8efb5..c622b32 100644
--- a/koans/es6/04-Quiz.jsx
+++ b/koans/es6/04-Quiz.jsx
@@ -3,32 +3,32 @@
 var Answers = {
   // Question #1: What is the name of the class that we extend to create components class?
   // Tip: See any of the exercises
-  answer1: "Enter your answer here",
+  answer1: "React.Component",

   // Question #2: JSX is converted directly into JavaScript. True or false?
   // Tip: See the first exercise.
-  answer2: null, // true/false?
+  answer2: true, // true/false?

   // Question #3: What's the name of the method that must be defined in every component?
-  answer3: "FILL ME IN",
+  answer3: "render",

   // Question #4: If I want to set `div` component's HTML class, what attribute
   //              should I declare in JSX?
   // Tip: See exercise #2.
-  answer4: "class",
+  answer4: "className",

   // Question #5: A component's properties can be changed after its initialization. True or false?
   // Tip: See exercise #3
-  answer5: null, // true/false?
+  answer5: false, // true/false?

   // Question #6: What's the name of the method for changing the component's state?
   // Tip: See exercise #3
-  answer6: 'stateSet',
+  answer6: 'setState',

   // Question #7: You must bind a component's methods (except `render`)
   //              to make it possible to change the state. True or false?
   // Tip: See exercise #3
-  answer7: null // true/false?
+  answer7: true // true/false?
 };

 export default Answers;
diff --git a/koans/es6/05-Challenge-GroceryList-part-1.jsx b/koans/es6/05-Challenge-GroceryList-part-1.jsx
index 137ac7a..98ff6a9 100644
--- a/koans/es6/05-Challenge-GroceryList-part-1.jsx
+++ b/koans/es6/05-Challenge-GroceryList-part-1.jsx
@@ -35,7 +35,7 @@ class GroceryList extends React.Component {
     // Hint: Don't forget about putting items into `ul`
     return (
       <div>
-        // Put your code here
+        <ul>{groceriesComponents}</ul>
       </div>
     );
   }
@@ -50,9 +50,7 @@ class GroceryListItem extends React.Component {

   render() {
     return (
-        <li>
-          // Put your code here.
-        </li>
+        <li>{this.props.grocery.name}</li>
     );
   }
 }
diff --git a/koans/es6/05-Challenge-GroceryList-part-2.jsx b/koans/es6/05-Challenge-GroceryList-part-2.jsx
index 448ce8f..ed065f7 100644
--- a/koans/es6/05-Challenge-GroceryList-part-2.jsx
+++ b/koans/es6/05-Challenge-GroceryList-part-2.jsx
@@ -42,8 +42,12 @@ class GroceryList extends React.Component {
   // Hint #1: You should use the `concat` function to modify groceries list.
   // Hint #2: Remember about the case where input is empty.
   // Hint #3: Name of the new grocery item will be stored in `this.state.newGroceryName`.
-  addGroceryItem() {
-    // Put your code here
+  addGroceryItem(event) {
+    debugger
+    if(this.state.newGroceryName.length > 0) {
+      let groceries = this.state.groceries.concat({name: this.state.newGroceryName})
+      this.setState({groceries: groceries})
+    }
   }

   render() {
@@ -62,13 +66,15 @@ class GroceryList extends React.Component {
     // Here are components for task #2.
     newProductInput = <input className='new-item' type="text" onChange={this.inputChanged}/>;
     // Something is missing here... Will anything happen if you click this button now?
-    newProductAddButton = <button className='add-product'>Add new Product</button>;
+    newProductAddButton = <button className='add-product' onClick={this.addGroceryItem}>Add new Product</button>;

     return (
       <div>
         <ul>
           {groceriesComponents}
         </ul>
+        {newProductInput}
+        {newProductAddButton}
       </div>
     );
   }
diff --git a/koans/es6/05-Challenge-GroceryList-part-3.jsx b/koans/es6/05-Challenge-GroceryList-part-3.jsx
index 50c4ac0..edf265b 100644
--- a/koans/es6/05-Challenge-GroceryList-part-3.jsx
+++ b/koans/es6/05-Challenge-GroceryList-part-3.jsx
@@ -44,7 +44,7 @@ class GroceryList extends React.Component {
   // Fill the definition of the following method to allow clearing the list
   // Hint: You can just simply set the groceries to an empty array.
   clearList() {
-    // Put your code here
+    this.setState({groceries: []})
   }

   render() {
@@ -72,6 +72,7 @@ class GroceryList extends React.Component {
         </ul>
         {newProductInput}
         {newProductAddButton}
+        {clearListButton}
       </div>
     );
   }
diff --git a/koans/es6/05-Challenge-GroceryList-part-4.jsx b/koans/es6/05-Challenge-GroceryList-part-4.jsx
index 6b0b062..f241022 100644
--- a/koans/es6/05-Challenge-GroceryList-part-4.jsx
+++ b/koans/es6/05-Challenge-GroceryList-part-4.jsx
@@ -75,7 +75,10 @@ class GroceryList extends React.Component {
   // Fill the definition of the following method to allow completing each item
   // Hint 1: Pay attention to the element's index on the list.
   toggleGroceryCompleteness(groceryIndex) {
-    // Put your code here
+    var newState = React.addons.update(this.state, {
+      groceries: { [groceryIndex]: {completed: {$set: true}}}
+    });
+    this.setState(newState)
   }

   render() {
diff --git a/koans/es6/06-RenderComponent.jsx b/koans/es6/06-RenderComponent.jsx
index 98d7e06..5accba6 100644
--- a/koans/es6/06-RenderComponent.jsx
+++ b/koans/es6/06-RenderComponent.jsx
@@ -14,7 +14,8 @@ class Name extends React.Component {

 // See you got a domNode passed as a `domNode` argument.
 function renderNameComponent(domNode) {
-  // Put your code here
+  let element = React.createElement(Name);
+  React.render(element, domNode);
 }

 // Hint: You have to use the `React.render(ReactElement element, DOMNode node)` method.
diff --git a/koans/es6/07-LifecycleMethods.js.jsx b/koans/es6/07-LifecycleMethods.js.jsx
index 18c96e2..6b5e2ee 100644
--- a/koans/es6/07-LifecycleMethods.js.jsx
+++ b/koans/es6/07-LifecycleMethods.js.jsx
@@ -56,6 +56,7 @@ class LifecycleMethodsComponent extends React.Component {
     // Task 1: Display a message "I'm mounted!" in developer's console when the
     //         component finishes mounting.
     //         Use `console.log` function for it.
+    console.log("I'm mounted!");   // these tasks are absurd
   }

   componentDidUpdate(prevProps, prevState) {
@@ -66,6 +67,7 @@ class LifecycleMethodsComponent extends React.Component {
     //         to previous values of properties and state.
     //         Think about it: Could you find a possible use case
     //                         for using previous state and properties values?
+    console.log('Updated!')
   }

   componentWillUnmount() {
@@ -77,6 +79,7 @@ class LifecycleMethodsComponent extends React.Component {
     //         you are listening for events. Your event listeners use setState
     //         directly. What will happen if you unmount the component?
     //         How can this lifecycle method help you to avoid such problems?
+    console.log("Goodbye, cruel world! :(");
   }

   render() {

[LucyMoore]

for the groceries list exerciises id love a walk through video explaining why this works its just so confusing

[voter101]

I solved first and second exercise on YouTube, but I forgot to mention it:

https://www.youtube.com/watch?v=wSC2Jqy3xLU https://www.youtube.com/watch?v=2iuVq17YQxM

What do you think?