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\"

Answer 1

You can avoid this by rewriting RecipeLists.js as a pure stateless component.

As Pure component:

import _ from 'lodash';
import RecipeItem from './RecipeItem';

const RecipeList = props => renderRecipeItems(props);

const renderRecipeItems = ({ recipes }) => _.map(recipes, recipeItem => );

export default RecipeList;

So now you're component is basically just a function with params.