Fat arrow function React Uncaught ReferenceError

I am new to programming and have been taking courses on udemy to learn JS, html and css because I read these were important before jumping into React. I have run into an issue that I cannot seem to explain. The following code executes properly and without error:

function FriendLy(props){
        return(
            <div className = "friendLy">
                <Avatar pic = {props.pic}/>
                <Username name = {props.name}/>
                <GetConnected/>
            </div>
        );
    }    

however, the following code returns an "Uncaught ReferenceError"

FriendLy = (props) => {
        return(
            <div className = "friendLy">
                <Avatar pic = {props.pic}/>
                <Username name = {props.name}/>
                <GetConnected/>
            </div>
        );
    }     

In my limited knowledge of ES6 and JS, these two expressions should yield the same result. I am using babel which I understand translates ES5 to ES6.

Please educate me on what I am misunderstanding in any and all of the above statements.

Thanks in advance

728x90

2 Answers Fat arrow function React Uncaught ReferenceError

Uou want to make it a function assigned to a variable, so you need to put const, var or let before FriendLy:

var FriendLy = (props) => {...}

3 months ago

You need to add const, let or var before your variable definition if you're running under strict mode.

const FriendLy = (props) => {
   return (
     // ...
   )
}

3 months ago