Ad

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.

Ad

Answer

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>;
};
Ad
source: stackoverflow.com
Ad