ECMA2015/ES6 With React, Redux(1)

Michael S
1 min readApr 20, 2019

--

ES6 With React, Redux

Destructuring Assignment

1. Destructuring Props(1) — ES6

When destructuring props with react component

Example 1

Before :

const foo = (props) => {...return <div>{props.foo}</div>}

After :

const Foo = ({foo}) => {...return <div>{foo}</div> }

Example 2

Before :

const profileUpdate = (profileData) => {

const { name, age, nationality, location } = profileData;

// do something with these variables
};

After :

const profileUpdate = ({ name, age, nationality, location }) => {

/* do something with these fields */
};

2. Destructuring Props(2) — ES6

When destructuring props in rendering

Before :

render() {  return (

<div>{this.props.fooList}</div>
)
};

After :

render() {  const { fooList } = this.props    return (

<div>{fooList}</div>
)
};

Reference :

--

--