如何在reactjs中修复“预期的分配或函数调用，而看到一个表达式”？

Question

I am following Grinder tutorial on react.js with creating burgerapp. I'm getting error:

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

After trying by myself i copied his file from finished project and got exactly same error so now im confused if problem is somewhere else, i might be blind or something isn't up to date with his tutorial. Already tried with adding return statements and changing to curly braces. Please keep in mind I saw this code in other stackoverflow but it looks exactly same.

My code:

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;

App should start showing build controls but right now it's not even compiling. Please don't be harsh im beginner in this topic.

Answer 1

Try something like this:

const buildControls = (props) => {

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

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

};

Answer 2

Ok found solution it's me being blind, problem was in different file, curly braces without return statement, after adding return it's fixed. Error was shown in BuildControls but problem was in BuildControl.

const BuildControl = (props) => {};  

while it should be

const BuildControl = (props) => ();