React.js - Erro de sintaxe: esta é uma palavra reservada na função render ()
Estou com um erro na palavra-chave reservada "this". No meu componente React abaixo, mostra-me passando um estado de um componente principal "App.js" para o componente "RecipeList.js" para mapear os dados e renderizar cada componente RecipeItem. Só não entendo por que recebo esse erro
React.js - Erro de sintaxe: esta é uma palavra reservada
O erro é chamado em RecipeList dentro do método de retorno de renderização; Se alguém pudesse ajudar, seria ótimo!
obrigado
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