Destructuring props assignment

I'm having some issues with eslint in react. Its asking me to use destructuring props assignment but when I change my code, it breaks.

Any ideas?

This is the full code

class LoginPage extends React.Component
submit = data =>

// This is how I tried to fix it!
//
// const login, history = this.props;
// login(data).then(() => history.push('/'));
// ;

// This is what I have, its working but eslint is complaining.
this.props.login(data).then(() => this.props.history.push('/'));

render()
return (
<div>
<h1>Login Page</h1>
<LoginForm submit=this.submit />
</div>
);



LoginPage.propTypes =
history: PropTypes.shape(
push: PropTypes.func.isRequired
).isRequired,
login: PropTypes.func.isRequired /* eslint-disable-line */
;

export default connect(
null,
login
)(LoginPage);


The error I get with the modified code is:

TypeError: Object(...)(...).then is not a function
LoginPage._this.submit
src/ components/pages/LoginPage.js:10

7 | class LoginPage extends React.Component {
8 | submit = data =>
9 ;
12 |
13 | render() {


It says the problem is in line 10.

Any help would be appreciated!

3 Answers
3

When you have multiple expression within a function, you need to write it within . In your case you would write

submit = data =>

const login, history = this.props;
login(data).then(() => history.push('/'));




Your fix looks fine, have you tried putting submit = (data) => ... in curly braces? Unless you're using something like coffeescript, multiple statements (one destructuring assignment and then the call) need to be in a block. That might be why eslint complains but it's working otherwise - it's just one expression, so no block necessary.

submit = (data) => ...

As the other point out you need curly braces . Like the following:

submit = data =>

const login, history = this.props;
login(data).then(() => history.push('/'));




es6 arrow function works with the following rules:

es6

return

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.