Uncaught TypeError: Cannot read property 'style' of null

[WitoTV]

Short summary:

Hello, I started using this package few days ago, it's amazing but I encountered weird problem related to changing routes with react-router-dom.

My example:

I made myself a little component for the "dropdown pill buttons" so I don't have to write them every time I need one of them on the page. (they are not a problem, tried removing them from the page, but same thing happens when I use SlideToggle by itself)

<SlideToggle
    collapsed
    duration={300}
    bestPerformance={true}
    render={({onToggle, toggleState, setCollapsibleElement}) => {
        this.toggleDropdown = (e) => {
            if(e) e.stopPropagation();
            this.setState((prevState) => {
                return (
                    {
                        toggle: !prevState.toggle
                    }
                )
            })
            onToggle();
        }
        let slideTemplate = (
            <div className={`pill-dropdown ${toggleState.toLowerCase() === 'expanded' || toggleState.toLowerCase() === 'expanding' ? 'toggled' : ''} ${this.props.className}`}>
                <div onClick={this.toggleDropdown} className="pill-dropdown__header">
                    <span className="oms-pd-r-5">{this.props.header}</span>
                    <figure className="oms-mg-l-auto oms-flex oms-flex-align-items-center oms-flex-justify-content-center oms-full-height oms-svg pill-dropdown__icon">
                        <ReactSVG path="/img/svg/arrow-down.svg" className="oms-svg__asset" />
                    </figure>
                </div>
                <div className="pill-dropdown__content">
                    <div ref={setCollapsibleElement} className="pill-dropdown__list dropdown-list">
                        {this.props.children}
                    </div>
                </div>
            </div>
        )
    return slideTemplate;
    }}
/>

Problem:

Every time I change page with react-router-dom <Link> whole page brakes throwing this error:

ReactSlideToggle.umd.min.js:1 Uncaught TypeError: Cannot read property 'style' of null at t.a.setCollapsedState (ReactSlideToggle.umd.min.js:1) at a.setCollapsibleElement (ReactSlideToggle.umd.min.js:1) at HTMLUnknownElement.callCallback (react-dom.development.js:104) at Object.invokeGuardedCallbackDev (react-dom.development.js:142) at invokeGuardedCallback (react-dom.development.js:191) at safelyDetachRef (react-dom.development.js:9707) at commitUnmount (react-dom.development.js:9946) at commitNestedUnmounts (react-dom.development.js:9976) at unmountHostComponents (react-dom.development.js:10263) at commitDeletion (react-dom.development.js:10313)

I have no idea why this happens...

UPDATE:

It looks to be somehow related to collapsed property and collapsed elements. When I remove it from my component / expend all on the page, everything works. But I can't do that, they need to start closed.

UPDATE 2:

Looks like it happens only when <SlideToggle/> disappears from the page.

Possible solution?

Check if <SlideToggle/> still exists when performing setCollapsedState?

[kunukn]

Looks like it's because the element was removed/doesn't exist in the DOM and the code tries to set style to collapsible element which is not there.

I probably need to update the code and insert some guard clauses.

A quick fix for your case could be to use the source code and apply in the method setCollapsedState if(this._state_.collapsibleElement){ /* code that set stuff to style */ }

[kunukn]

I published a new version, hopefully you shouldn't see Cannot read property 'style' of null anymore

[WitoTV]

Thank you, I just installed a new version few sec ago. Works like a charm.