Reactjs call function from another component

Question

I want keep api function in separate page but I couldn't call Login api call function from login component

Console error - TypeError: _services__WEBPACK_IMPORTED_MODULE_3__.UseApi.Login is not a function

//services
export const UseApi = () => {
    const Login = (email, password) => {
        axios.post('/api/login', { email: email, password: password})
           .then((result) => {
           });
    }
}


// login component
import { UseApi } from "./services" ;
const Login = () => {
    const handleSubmit = (event) => {
        UseApi.Login(email, password) 
    }
}

Yousaf · Accepted Answer · 2020-05-23 13:08:00Z

useApi is a function with another function Login defined inside it.

either return the function from useApi function

export const UseApi = () => {
    return (email, password) => {
        axios.post('/api/login', { email: email, password: password})
           .then((result) => {
                // code
           });
    }
}

and call it as UseApi()(email, password)

or just remove the nested function

export const UseApi = (email, password) => {
     axios.post('/api/login', { email: email, password: password})
     .then((result) => {
          // code
      });

}

and call it as UseApi(email, password)

Another approach could be to return an object from UseApi function that contains the login function

export const UseApi = () => {
    return {
        login: (email, password) => {
          axios.post('/api/login', { email: email, password: password})
            .then((result) => {
                // code
            });
        }
    }
}

and call it as UseApi().login(email, password)

Collectives™ on Stack Overflow

Reactjs call function from another component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related