Trouble with #05 - Part 1: GroceriesListItem should display a grocery name

[josh18]

My code

var React = require("react");

// This exercise is a bit bigger than the previous ones.
// We will make a reactive grocery list.
//
// Task: Fill the `return` of `GroceryList` render method. It should return
//       a list of `GroceryListItem`. You need to display the groceries names
//       using `this.props` in `GroceryListItem`. We already prepared the variable
//       `groceriesComponents` inside `render` method` containing list of these items for you.

class GroceryList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      groceries: [ { name: "Apples" } ]
    };
  }

  render() {
    let groceriesComponents = [];
    // Properties are a way to pass parameters to your React components.
    // We mentioned this in the third exercise. Properties are to React
    // components what attributes are to HTML elements.
    //
    // Below you can see how to pass properties to child components.
    // We have defined a `grocery` property for each `GroceryListItem`.
    for(var index = 0; index < this.state.groceries.length; index++) {
      groceriesComponents.push(
          <GroceryListItem grocery={this.state.groceries[index]} key={index} />
      );
    }

    // Hint: Don't forget about putting items into `ul`
    return (
      <ul>
        {groceriesComponents}
      </ul>
    );
  }
}

// Render grocery name from component's properties.
// If you have problem check `this.props` in the console.
class GroceryListItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <li>{this.props.grocery}</li>
    );
  }
}

export default GroceryList;

I'm pretty sure the issue is due to an extra <span> being inside the <li> like:

<li data-reactid=".3.$0">
    <span data-reactid=".3.$0.$name:0">Apples</span>
</li>

but I'm not sure how to fix it. Any help would be much appreciated.

[MrBri]

Just want to render the name.
this.props.grocery.name

[josh18]

Oh right that makes sense. How come it was working (kinda) when it was an object instead of displaying [object Object]? Is that a react thing?

[MrBri]

My understanding it's the JSX parser.
Have yet to find specific docs but as you pointed out it interpreted the grocery object and added the name property as a span element.

[bronson]

Really glad this issue demonstrated a potential pitfall! I find automatically rendering ithe name attribute a little disturbing. Hoping someone finds some docs that makes it feel less magic.

[voter101]

Guys, you can see code produced by JSX parser by just compiling the code (in case of reactjs_koans it will be placed in src directory). To compile the code, you can e.g. run tests. :)

[bronson]

Making this change produces this result in the compiled code:

diff src/es6/05-Challenge-GroceryList-part-1.js /tmp/1.js 
87c87
<         this.props.grocery
---
>         this.props.grocery.name

Looks like it's some sort of React magic, not jsx.

[voter101]

Yes, it's a React.DOM elements magic - it convert every key into span.