props function error "is not a function" in react

564 Views Asked by At

I got user's google login information from 'react-google-login'

and I want store this information using react-redux.

I call 'responseGoogle' function when login success.

In this function, create struct using (react-google-login)'s response

and keep this struct into component's state.

and call module's function 'onChangeUser' to change Store's state.

but when call 'responseGoogle', error is detected.

error

the cause is that props from container is undefined.. in component

This is component

const GoogleLoginButton = ({ onChangeUser }) => {
    const [user, setUser] = useState(null);
    
    const responseGoogle = response => {
        const newUser = {
            googleId: response.profileObj.googleId,
            username: response.profileObj.name,
            token: response.accessToken,
        }  
        setUser(newUser);
        onChangeUser(newUser);
    };

    const responseError = response => {
        console.log(response);
    }

    return (
        <GoogleLogin 
            clientId={CLIENTKEY}
            onSuccess={responseGoogle}
            onFailure={responseError}
        />
    );
}
export default GoogleLoginButton;

This is Container

const GoogleLoginButtonContainer = () => {
    const dispatch = useDispatch();
    const { user } = useSelector(({ auth }) => ({
        user: auth.user
    }));

    const onChangeUser = value => {
        dispatch(
            changeField({
                key: 'user',
                value: value,
            })
        );
    }

    useEffect(() => {
        dispatch(initializeForm('login'))
    }, [dispatch]);

    return (
        <GoogleLoginButton onChangeUser={onChangeUser} user={user} /> 
    );
}

export default GoogleLoginButtonContainer;

This is module

    const CHANGE_FIELD = 'auth/CHANGE_FIELD';
    const INITIALIZE_FORM = 'auth/INITIALIZE_FORM'

    export const changeField = createAction(
        CHANGE_FIELD,
        ({ key, value }) => ({ key, value })
    );

    export const initializeForm = createAction(
        INITIALIZE_FORM,
        user => user
    )

    const initialState = {
        user: {
            googleId: '',
            username: '',
            token: '',
        }
    };

    const auth = handleActions(
        {
            [CHANGE_FIELD]: (state, { payload: { key, value } }) => ({
                ...state,
                [key]: value,   
            }),
            [INITIALIZE_FORM]: (state, { payload: user }) => ({
                ...state,
                [user]: initialState[user]
            })
        
        },
        initialState
    );
    export default auth;
0

There are 0 best solutions below