javascript - React.js - Syntax error: this is a reserved word in render() function

Question

I'm stuck on a error for the reserved keyword "this". In my React Component below shows me passing in a state from a my main component "App.js" to my "RecipeList.js" component to then map the data and render each RecipeItem Component. I just don't understand why I get this error

React.js - Syntax error: this is a reserved word

The error is called in RecipeList inside the render return method; If anybody could help that would great!

Thanks

App.js

//main imports
import React, { Component } from 'react';

//helper imports
import {Button} from 'reactstrap'
import RecipeItem from './components/RecipeItem';
import RecipeList from './components/RecipeList';
import './App.css';

const recipes = [
  {
    recipeName: 'Hamburger',
    ingrediants: 'ground meat, seasoning'
  },
  {
    recipeName: 'Crab Legs',
    ingrediants: 'crab, Ole Bay seasoning,'
  }
];

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      recipes
    };
  }

  render() {
    return (
      <div className="App">
        <div className = "container-fluid">
          <h2>Recipe Box</h2>
          <div>
            <RecipeList recipes = {this.state.recipes}/>
          </div>
        </div>
        <div className = "AddRecipe">
          <Button>Add Recipe</Button>
        </div>

      </div>
    );
  }
}

export default App;

RecipeLists.js

import React, {Component} from 'react';
import _ from 'lodash';
import RecipeItem from './RecipeItem';


class RecipeList extends Component {

    renderRecipeItems() {
      return _.map(this.props.recipes, recipeItem => <RecipeItem key = {i} {...recipes} />);
    }

    render() {
      return (
        { this.renderRecipeItems() }
      );
    }
}

export default RecipeList

Answer 1

All the solutions given here are correct.

The easiest change is to just wrap your function call in a JSX element:

return (
  <div>
    { this.renderRecipeItems() }
  </div>
)

However, none of the answers are (correctly) telling you why the code was breaking in the first place.

For the sake of an easier example, let's simplify your code a bit

// let's simplify this
return (
  { this.renderRecipeItems() }
)

such that the meaning and behavior are still the same. (remove parenths and move curlies):

// into this
return {
  this.renderRecipeItems()
};

What this code does is it contains a block, denoted by {}, within which you're trying to invoke a function.

Because of the return statement, the block {} is treated like an object literal

An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

which expects either a: b or a (shorthand) syntax for it's property-value pairs.

// valid object
return {
  prop: 5
}

// also valid object
const prop = 5;
return {
  prop
}

However, you're passing a function call instead, which is invalid.

return {
  this.renderRecipeItems() // There's no property:value pair here
}

When going through this code, the engine assumes it will read an object-literal. When it reaches the this., it notices that . is not a valid character for a property name (unless you were wrapping it in a string - see bellow) and the execution breaks here.

function test() {
  return {
    this.whatever()
    //  ^ this is invalid object-literal syntax
  }
}

test();