React component giving no-unused-expression error in map

Question

I am very new to React, would appreciate a simple help.

The below code is a part of my training application and I am just not able to figure out the issue I am having with it. A pointer would very much help and save my time.

const transformedIngredients = Object.keys(props.ingredients).map(igKey => {
  return [...Array(props.ingredients[igKey])].map((_, i) => {
    <BurgerIngredient key={igKey + i} type={igKey} />;
  });
});

The error I am getting is:

Line 8:37: Expected an assignment or function call and instead saw an expression no-unused-expressions

Can someone give me a helpful pointer?

Answer 1

Remove the {} after =>, or add a return after {}

.map(... => <YourComponent />) // OK
.map(... => {return <YourComponent />}) // OK
.map(... => {<YourComponent />}) // Error

const transformedIngredients = Object.keys(props.ingredients).map(igKey => {
  return [...Array(props.ingredients[igKey])].map((_, i) => 
    <BurgerIngredient key={igKey + i} type={igKey} />;
  );
});