What is "=>" meaning in the react-motion code?

Question

The react-motion library is really amazing, the '=>' operator confused me though. During my implementation, it always show me some syntax error such as "Uncaught SyntaxError: Unexpected token {". I checked my code and I was unable to find the bug. I can't understand what is the meaning of "=>" and what syntax should follow. Could anyone solve my doubt? here's my code:

<Motion defaultStyle={this.getDefaults()} style={this.getEnds()}>
            {current => {

                    Object.keys(current).map(key => {
                        let {rotate,scale} = current[key].val;
                        let style = {
                            transform: `rotate(${rotate}deg) scale(${scale})`
                        };
                        return 
                            <div
                                key={key}
                                className="block"
                                style={style}>
                                {key}
                            </div>


                    })}

            }
        </Motion>

Thank you.

This looks like an [Ecmascript 6 arrow function](http://exploringjs.com/es6/ch_arrow-functions.html). — jkinkead, Jan 08 '16 at 15:29

score 3 · Answer 1 · answered Jan 08 '16 at 15:53

The => is the ES6 way, known as an arrow function expression or a fat arrow function, of declaring an anonymous function with its this set lexically to the object at hand.

In order for you to use this language construct you need to transpile your code through a tool like Babel or only support Chrome 45+, Firefox 22+ or Microsoft Edge.

What is "=>" meaning in the react-motion code?

1 Answers1