ReactJS/ES6: Equivalence Between Two Blocks Of Code

- 1 answer

I'm currently going through the ReactJS tutorial given here, and I observed a particular shorthand that I could not quite follow.

export default ({task}) => <div>{task}</div>;

The author gives the above line of code as shorthand for the code I've written below, which I believe works the same way.

export default class Note extends Component {
    render() {
        return <div>{this.props.task}</div>;

I've tried to look up React documentation to figure out how the shorthand is handled to little avail. Any help would be appreciated.



As per documentation for components "Stateless Functions":

You may also define your React classes as a plain JavaScript function. For example using the stateless function syntax ...

So in your case it works because you are using just a plain function instead of class. ES2015 syntax here is basically translates to:

export default function(task) {
    return <div>{task}</div>;