react no-shadow rule handling - reactjs

Question

I am pretty new in react. I am trying to create first app which should handle login. Actually everything works even now, but im getting eslint error with no-shadow on line 18.
This is my LoginForm controller:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Button, TextInput, Logo, Block } from 'vcc-ui';
import { login } from '../../redux/reducer';
import { styles } from './LoginForm-styles';
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {};
}
onSubmit = (e) => {
e.preventDefault();
const { username, password } = this.state;
login(username, password);
}
render() {
const {username, password} = this.state;
const {isLoginPending, isLoginSuccess, loginError} = this.props;
return (
<Block
extend={styles.loginWrapper}
>
<Block
extend={styles.loginForm}
>
<Block
as="form"
name="loginForm"
onSubmit={this.onSubmit}
>
<Block
extend={styles.loginLogo}
>
<Logo height="60"/>
</Block>
<Block
extend={styles.loginInput}
>
<TextInput
value={username}
placeholder="username"
type="text" name="username"
onChange={e => this.setState({username: e.target.value})}
/>
</Block>
<Block
extend={styles.loginInput}
>
<TextInput
value={password}
placeholder="password"
type="password"
name="password"
onChange={e => this.setState({password: e.target.value})}
/>
</Block>
<Block
extend={styles.loginButton}
>
<Button
loading={isLoginPending}
variant="outline"
type="submit"
fullWidth={["s","m","l"]}
>
Login
</Button>
</Block>
{isLoginPending && <div>Processing</div>}
{isLoginSuccess && <div>Logged In</div>}
{loginError && <div>Incorrect Username or Password</div>}
</Block>
</Block>
</Block>
)
}
}
LoginForm.propTypes = {
isLoginPending: PropTypes.bool,
isLoginSuccess: PropTypes.bool,
loginError: PropTypes.string,
login: PropTypes.func
};
LoginForm.defaultProps = {
isLoginPending: false,
isLoginSuccess: false,
loginError: "",
login: () => undefined
};
const mapStateToProps = (state) => ({
isLoginPending: state.isLoginPending,
isLoginSuccess: state.isLoginSuccess,
loginError: state.loginError,
})
const mapDispatchToProps = (dispatch) => ({
login: (username, password) => dispatch(login(username,password))
})
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm)
onSubmit function is throwing no-shadow esling error. Please how can i rewrite it or define login prop so it will not throw it?
I know that login is somehow changing its value on 2 places, but i dont know how to make it more "nice" lets say.
Do anybody have some idea?
Thanks.

Answer 1

you can import your login with an alias:
import { login as reducerLogin } from '../../redux/reducer';
...
const mapDispatchToProps = (dispatch) => ({
login: (username, password) => dispatch(reducerLogin(username,password))
})

Answer 2

This error occurs when you have two variables with the same name but different scope.
By the way, I believe you should be using this.props.login(username, password); instead of calling the imported action creator directly.
You could give the mapped function whatever name you like. For instance:
// At line 18
this.props.loginAction(username, password)
// Mapping action creator shortcut...
export default connect(mapStateToProps,{ loginAction: login })(LoginForm)