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 piling. Please don't be harsh im beginner in this topic.

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 piling. Please don't be harsh im beginner in this topic.

• javascript
• reactjs
• jsx

• 1 It looks fine... it may just be an issue with your linter, since that is a linting error. Maybe try restart your IDE – Michael Doye Commented Apr 19, 2019 at 12:44
• I was trying to restart node and restarting whole IDE and still got same error. Same error is shown when trying cbdev420 solution;/ It shows line with array as root of error. – Radek L Commented Apr 19, 2019 at 12:59
• 2 Voted to close as off-topic / unlikely to help other readers. See OP's answer "... problem was in different file ...". – ToolmakerSteve Commented Nov 2, 2019 at 18:58

2 Answers 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) => ();

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>
  );

};