CODEWITHSUNDEEP
reactjs
TechValens
TechValens

Reputation: 437

ReactJS: export function from one stateful component to another

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

Upvotes: 2

Views: 964

Answers (2)

gazdagergo
gazdagergo

Reputation: 6691

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.

Upvotes: 0

sigmus
sigmus

Reputation: 3237

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.

Upvotes: 1

Related Questions