React callback ref not expose class methods from outside

Question

The task is: implement React component for toasts - hiding by itself, showing from outside. Most of React guides describe how to access DOM from React component. Almost nothing about how to access React component from DOM. My code for React component is:

import React from "react";

export default class Alert extends React.Component {
    constructor(props) {
        super(props);
        this.type = null;
        this.message = null;
        this.state = { show: false };
        this.alertCallbackRef = alert => { window.toast = alert; };
    }

    show = (type, message) => {
        this.type = type;
        this.message = message;
        this.setState({ show: true });
    }

    hide = () => {
        this.setState({ show: false });
    }

    render() {
        return (
            <>
                <div ref={this.alertCallbackRef}> // here ref
                    {
                        this.state.show ? (
                            // here visible part
                        ) : null
                    }
                </div>
            </>
        );
    }
}

Then check <Alert/> tag on HTML page:

window.toast contains DOM Node <div></div>.
window.toast.any_function (show / hide / etc) - is not a function.

What's wrong?

The ref is pointing to the div, not to the component. window.toast = this should work in the constructor — Konrad
– Konrad, Commented Feb 22, 2023 at 9:06
@Konrad: great! I'm so silly - ref don't return class instance, just some DOM nodes — vbulash
– vbulash, Commented Feb 22, 2023 at 9:44

vbulash · Accepted Answer · 2023-02-22 09:51:10Z

1

Cancel all about refs in code
Just assign window.toast = this in constructor. Thanks to @Konrad

answered Feb 22, 2023 at 9:51

vbulash

3952 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

React callback ref not expose class methods from outside

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