How to pass this props to functional component - reactjs

Question

First of all I rarely use functional component, but this time I required to use it. So, I have this component called Login that use redux :
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { getLoginData } from "../../redux/actions/LoginActions";
function Login() {
useEffect(() => {
const { getLoginData } = this.props;
getLoginData("test");
}, []);
return (
<div>
<h1>Login</h1>
</div>
);
}
const mapStateToProps = (state) => ({
login: state.login,
});
const mapDispatchToProps = (dispatch) => ({
getLoginData: (value) => dispatch(getLoginData(value)),
});
export default connect(mapStateToProps, mapDispatchToProps)(Login);
It produce error since this is undefined. But, if I change it to class component like this:
import React from "react";
import { connect } from "react-redux";
import { getLoginData } from "../../redux/actions/LoginActions";
class Login extends React.Component {
componentDidMount() {
const { getLoginData } = this.props;
getLoginData("test");
}
render() {
return (
<div>
<h1>Login</h1>
</div>
);
}
}
const mapStateToProps = (state) => ({
login: state.login,
});
const mapDispatchToProps = (dispatch) => ({
getLoginData: (value) => dispatch(getLoginData(value)),
});
export default connect(mapStateToProps, mapDispatchToProps)(Login);
It will worked as expected(the redux is also worked). The question is, How can I pass this.props to functional component?

Answer 1

Function components get their props passed in as the argument to that function:
function Login(props) {
useEffect(() => {
props.getLoginData("test");
}, []);
// ...
}
// Or with destructuring:
function Login({ login, getLoginData }) {
useEffect(() => {
getLoginData("test");
}, []);
// ...
}
That said, if you're using a function component, then it's simpler to use hooks instead of connect:
function Login() {
const login = useSelector(state => state.login);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getLoginData("test"));
}, []);
//...
}
// Note that there is no mapStateToProps/mapDispatchToProps/connect here
export default Login;

Answer 2

As per the React docs, you pass a props object to the function and access the values as attributes of props.
So, for your implementation, you'd do it like this:
function Login(props) {
useEffect(() => {
props.getLoginData("test");
}, []);
return (
<div>
<h1>Login</h1>
</div>
);
}
Or, you could replace function Login(props) with function Login({getLoginData}) to unwrap the value and replace props.getLoginData("test") with getLoginData("test").