import React from 'react';

const Avatar = ({ url }) => <img src={ url } />; class Profile extends React.Component {

render() {

return (

<div>

<Avatar url={ this.props.avatarUrl } />

{ `${ this.props.firstName } ${ this.props.lastName } - ${ this.props.email }` }

</div>

);

}

} export default Profile;

This simple example can illustrate how “this.props” can clutter your code, that’s why we see React developers tend to use ES6 Destructuring capabilities.

import React from 'react';

const Avatar = ({ url }) => <img src={ url } />; class Profile extends React.Component {

render() {

const { avatarUrl, firstName, lastName, email } = this.props; return (

<div>

<Avatar url={ avatarUrl } />

{ `${ firstName } ${ lastName } - ${ email }` }

</div>

);

}

} export default Profile;

Cleaner? Yes, but we can do better.

How about, injecting the props into the render method, “kinda” like a stateless component?

import React from 'react';

const Avatar = ({ url }) => <img src={ url } />; class Profile extends React.Component { render({ avatarUrl, firstName, lastName, email }) {

return (

<div>

<Avatar url={ avatarUrl } />

{ `${ firstName } ${ lastName } - ${ email }` }

</div>

);

} } export default Profile;

How?

Well the example above doesn’t work without doing something like this:

import React from 'react';

const Avatar = ({ url }) => <img src={ url } />; class Profile extends React.Component { render({ avatarUrl, firstName, lastName, email }) {

return (

<div>

<Avatar url={ avatarUrl } />

{ `${ firstName } ${ lastName } - ${ email }` }

</div>

);

} } const oldRender = Profile.prototype.render; Profile.prototype.render = function propsInjectorFunction() {

return oldRender.bind(this)(this.props);

} export default Profile;

We probably want to export the “propsInjectorFunction” functionality to another file and be able to reuse it on other classes right?

Enter ES7 decorators (https://github.com/wycats/javascript-decorators)

function injectProps(target, name, descriptor) {

const oldFunction = descriptor.value; descriptor.value = function propsInjectorFunction() {

return oldFunction.bind(this)(this.props);

}; return descriptor;

} export default injectProps;

and now on the Profile class we import the decorator a use it like so.