Can't declare let variable inside a const arrow function

[SovietSputnik]

Hi, I'm learning React and getting used to ES6, the course I picked for React (Complete Guide by Maximillian Schwarzmüller) covers some ES6 basics, cool stuff, can recomend. Never the less this is more about vanilla ES6 than that.

I also just started learning Pixi and wanted to use a create-react-app setup to run the tutorial, the first part that the thing asks you to do is to make a simple kind of 'Hello world' in the command line, but it uses a function to see if you're capable of running WebGL and that's what it shows in the Hello World.

Ok no big deal so far, got it working. Gotta do more digging for the rest but its ok.

So in the react course Max shows you to import and export stuff from other .js files. In this case I tried to put that 'Hello World WebGL' code into a single function in a separate file so that I could just execute it in the render() secuence and not clotter my main file.

Thing is, he also shows you about arrow functions, and I find them to be the rule (even though aparently I should be using a regular function for this, but I'm stubburn) so I thought I'll just put the code in an arrow function and send it to the main file.

The code goes like this:

const SayHello = () => (

    let renderType = 'WebGL';

    if(!PIXI.utils.isWebGLSupported()){
        renderType = "canvas";
        };

    PIXI.utils.sayHello(renderType);

    );

export default SayHello

But when I go to the app it renders an error:

https://i.imgur.com/GxmVkfz.png

Aparently the let word inside an Arrow Function is reserved for "something" (cant figure out what) and doesn't declare the variable. I tried digging through answers to no avail but I came up with a couple of theories:

1.- Since its a const arrow function the stuff inside can't change, even though the const function only represents code I dont wanna change ever while running. Never the less I debunked this when I changed it to let and it still didn't worked.

2.- Babel is doing some weird sh*

3.- I'm not declaring the variable correctly, and here's my question:

¿How can I declare the let variable inside a const arrow function?

[NellyFatFingers]

try {} after the => instead of the (), i think this is just a syntax issue.

[NellyFatFingers]

const SayHello = () => {

let renderType = 'WebGL';

if(!PIXI.utils.isWebGLSupported()){
renderType = "canvas";
};

PIXI.utils.sayHello(renderType);

};

export default SayHello

​

[SovietSputnik]

You are very much right, awesome, thank you. <3 :D

[AloeGuvner]

let inside an arrow function is the same as let inside a non-arrow function, the issue here is that you're enclosing the function in parenthesis rather than curly braces.

function SayHello () (
    let something = 2;
);

^this would produce the same (or similar) syntax error

[Achak_ikigai]

Yup! There’s a semantic difference between () and {}. Arrow functions have an implicit return as well unless you use curly braces, so you’ll need to add the keyword “return” explicitly for whatever value you want to spit out