Как исправить «Ожидается назначение или вызов функции и вместо этого видел выражение» в реагировать?

Question

Я слежу за обучением Grinder на activ.js по созданию burgerapp. Я получаю сообщение об ошибке:

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

Попробовав самостоятельно, я скопировал его файл из готового проекта и получил точно такую ​​же ошибку, так что теперь я растерялся, если проблема где-то еще, я могу быть слепым или что-то не в курсе его урока. Уже пробовал с добавлением операторов возврата и переходом на фигурные скобки. Пожалуйста, имейте в виду, что я видел этот код в другом стеке потока, но он выглядит точно так же.

Мой код:

const controls = [
    { label: 'Salad', type: 'salad' },  //line 6 studio code says error is here
    { label: 'Bacon', type: 'bacon' },
    { label: 'Cheese', type: 'cheese' },
    { label: 'Meat', type: 'meat' },
];


const buildControls = (props) => (
<div className ={"BuildControls"}>
    {controls.map(ctrl =>(
        <BuildControl key={ctrl.label} label={ctrl.label}/>
))}
    </div>
);
export default buildControls;

Приложение должно начать показывать элементы управления сборкой, но сейчас оно даже не компилируется. Пожалуйста, не будь резким новичком в этой теме.

Answer 1

Хорошо, нашел решение, это я слепой, проблема была в другом файле, фигурные скобки без оператора возврата, после добавления возврата это исправлено.Ошибка была показана в BuildControls, но проблема была в BuildControl.

const BuildControl = (props) => {};  

, в то время как она должна быть

const BuildControl = (props) => ();

Answer 2

Попробуйте что-то вроде этого:

const buildControls = (props) => {

  const controlItems = controls.map(ctrl =>
    <BuildControl key={ctrl.label} label={ctrl.label}/>
  );

  return(
  <div className ={"BuildControls"}>
    {controlItems}
  </div>
  );

};