title: React.js - Syntax error: this is a reserved word in render() function
body: <p>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</p>
  
  <blockquote>
    <p>React.js - Syntax error: this is a reserved word</p>
  </blockquote>
  
  <p>The error is called in RecipeList inside the render return method; If anybody could help that would great! </p>
  
  <p>Thanks</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>//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 (
        &lt;div className="App"&gt;
          &lt;div className = "container-fluid"&gt;
            &lt;h2&gt;Recipe Box&lt;/h2&gt;
            &lt;div&gt;
              &lt;RecipeList recipes = {this.state.recipes}/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className = "AddRecipe"&gt;
            &lt;Button&gt;Add Recipe&lt;/Button&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>RecipeLists.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import _ from 'lodash';
  import RecipeItem from './RecipeItem';
  
  
  class RecipeList extends Component {
  
      renderRecipeItems() {
        return _.map(this.props.recipes, recipeItem =&gt; &lt;RecipeItem key = {i} {...recipes} /&gt;);
      }
  
      render() {
        return (
          { this.renderRecipeItems() }
        );
      }
  }
  
  export default RecipeList
  </code></pre>