javascript - How to call a function which has a same name with a parameter

Question

I am new to react. I wanna call a function from other .js file which has the same name with the parameter in the dashboard function. But it shows TypeError: getCurrentProfile is not a function. Any tips and helps are much appreciated in advance!

for example:

import { getCurrentProfile } from '../actions/profile';

const Dashboard = ({
getCurrentProfile,
auth: { user }

}) => {
useEffect(() => {
    getCurrentProfile();
}, []);
return(
    <Fragment>
        <h1> DAshboard</h1>
        <i className='das fa-user'></i><p>Welcome {user && user.name}</p>
    </Fragment>
    );
};

error: TypeError: getCurrentProfile is not a function

question from:https://stackoverflow.com/questions/65644109/how-to-call-a-function-which-has-a-same-name-with-a-parameter

Answer 1

You'll need to make it so that there's no name collision. You could rename the import, or rename the destructured prop, or don't destructure the props at all.

Actually, it doesn't look like the getCurrentProfile prop is used at all, so you could just remove it from the parameter list:

const Dashboard = ({
    auth: { user }
}) => {
    useEffect(getCurrentProfile, []);
    return (
        <Fragment>
            <h1> DAshboard</h1>
            <i className='das fa-user'></i><p>Welcome {user && user.name}</p>
        </Fragment>
    );
};

If you actually are using the getCurrentProfile prop somewhere, then you could do

const Dashboard = (props) => {
    const { user } = props.auth;
    useEffect(getCurrentProfile, []);