How to destructure object containing functions?

Question

I have the following React component:

import { AppInterface } from 'pages/_app'

export default class SiteNavBtn extends React.Component {

    static contextType = AppInterface

    render() {

        const { actions } = this.context 
        const { toggleSiteNav } = actions || {}

        return(
            <button className="site-nav-btn" onClick={ () => toggleSiteNav() }>
                <i className="icon"><span>Open menu</span></i>
            </button>
        )

    }   

}

With the above code, if this.context is undefined and I click on the button, an error complains that toggleSiteNav is not a function (as expected), so I have set an empty function as a default value for it:

const { actions } = this.context 
const { toggleSiteNav = () => {} } = actions || {}

This works, meaning that if this.context is undefined, when I click on the button now nothing happens of course but I don't get an error, however I believe I am invoking an empty function. Is this correct or is there a better way to destructure an object that contains functions and that may be undefined?

I personally just wouldn't register the event if the callback does not exist. Otherwise, I would make a generic callback that process the click request and handles what to do if the desired callback does not exist. — briosheje
– briosheje, Commented Apr 12, 2019 at 8:06
It seems fine to me. You can just put onClick={toggleSiteNav} in this case. — AlexandreS
– AlexandreS, Commented Apr 12, 2019 at 8:07
Code seems fine to me and as mentioned this onClick={ () => toggleSiteNav() } can be writte as onClick={toggleSiteNav} — Lukáš Gibo Vaic
– Lukáš Gibo Vaic, Commented Apr 12, 2019 at 8:10

jo_va · Accepted Answer · 2019-04-12 08:28:50Z

1

That is correct, you could however write it like this:

const { actions: { toggleSiteNav = () => {} } = {} } = this.context;
...
<button onClick={toggleSiteNav} ...

Or simply not attach the handler if it is falsy:

const { actions: { toggleSiteNav } = {} } = this.context;
...
<button onClick={toggleSiteNav ? toggleSiteNav : null} ...

edited Apr 12, 2019 at 8:28

answered Apr 12, 2019 at 8:23

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

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

Comments

elad · Accepted Answer · 2019-04-12 08:11:59Z

You can move some of your code to a separate function:

import { AppInterface } from 'pages/_app'

 export default class SiteNavBtn extends React.Component {

        static contextType = AppInterface

        toggleSiteNav(){
             const { actions } = this.context 
             const { toggleSiteNav } = actions || {};
             if(typeof toggleSiteNav === 'function'){
                   toggleSiteNav ();
             }

        }


        render() {

            return(
                <button className="site-nav-btn" onClick={ () => this.toggleSiteNav() }>
                    <i className="icon"><span>Open menu</span></i>
                </button>
            )

        }   

    }

Collectives™ on Stack Overflow

How to destructure object containing functions?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related