Я застрял на ошибке для зарезервированного ключевого слова "это". В моем компоненте React ниже показано, как я передал состояние из моего основного компонента "App.js" в свой компонент "RecipeList.js", чтобы затем отобразить данные и отобразить каждый компонент RecipeItem. Я просто не понимаю, почему я получаю эту ошибку
React.js - Синтаксическая ошибка: это зарезервированное слово
Ошибка вызывается в RecipeList внутри метода возврата рендеринга; Если бы кто-нибудь мог помочь, это здорово!
Спасибо
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