ReactJS: export function from one stateful component to another

Question

I have a component Layout (layout.js),

 logout(){
        var _that = this;

    /***** fetch API for logout starts **********/

    fetch(Constants.SERVER_URL + '/api/v1/auth/logout/', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': _that.state.userData.token
        },
    }).then(function (response) {
        let responseData = response.json();
        responseData.then(function (data) {
            if (data.status == 200) {

                localStorage.removeItem('token');
                localStorage.removeItem('fullname');
                localStorage.removeItem('email');
                _that.updateAuthState();

                setTimeout(function () {
                    _that.props.history.push("/sign-in");
                }, 2000);

            } else if (data.status == 401) {

                localStorage.removeItem('token');
                localStorage.removeItem('fullname');
                localStorage.removeItem('email');
                _that.updateAuthState();

                setTimeout(function () {
                    _that.props.history.push("/sign-in");
                }, 2000);
            } else {
                Alert.success('<h4>' + Message.SIGNOUT.SUCCESS + '</h4>', {
                    position: 'top-right',
                    effect: 'slide',
                    beep: false,
                    timeout: 2000
                });

                localStorage.removeItem('token');
                localStorage.removeItem('fullname');
                localStorage.removeItem('email');
                _that.updateAuthState();

                setTimeout(function () {
                    _that.props.history.push("/sign-in");
                }, 2000);
            }
        })
    }).catch(function (error) {

        }
    });

    /***** fetch API for logout ends **********/
}`

and i need to use this function inside another component, without passing into props, how can I access this function. Is there any way to export this function and import it into another component. Please help me with this. Thanks

sigmus · Accepted Answer · 2018-08-16 12:03:05Z

1

Doing the other way around will be easier. Extract your logout method into an external function. The components that need to use it can import the function.

answered Aug 16, 2018 at 12:03

sigmus

3,2473 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TechValens Over a year ago

But I need to use _that.updateAuthState(); function that is inside Layout component, which will not be accessible if I create an external function. I tried your solution before

sigmus Over a year ago

Can't you also extract that method as well? Remove all behaviour that needs do be shared among components to an external module.

gazdagergo · Accepted Answer · 2018-08-16 12:49:35Z

0

Use HOC (higher order component) like in this example: How to make React HOC - High Order Components work together? So you can use logout in another component this way:

import WithLogout from './WithLogout'

class OtherComponent extends React.Component {
  handleLogoutClick = () => {
    this.props.onLogout()
  }

  render() {
    ...
  }

}

export default WithLogout(OtherComponent);

Where the logout is equivalent to the example's update method.

edited Aug 16, 2018 at 12:49

answered Aug 16, 2018 at 11:35

gazdagergo

6,7811 gold badge36 silver badges50 bronze badges

Collectives™ on Stack Overflow

ReactJS: export function from one stateful component to another

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related