react component class variable access

Question

How do I access this the_frame variable?

export default class oneApp extends React.Component {
    constructor (props) {
        super(props);
        const the_frame = document.getElementsByClassName("frame")[0];
    }

    oneFunc() {  
        the_frame.style.display = "none"; // How do I access the_frame ?
    }

    twoFunc() {
        the_frame.style.display = "block"; 
    }

    render() {
        return (
            <div className="frame">Hello World</div>
        )
    }
}

I also tried this.the_frame = document.getElementsByClassName("frame")[0]; but can't access the_frame. Thanks

Raphael Rafatpanah · Accepted Answer · 2017-07-23 11:51:38Z

2

You should use the ref attribute if you would like a reference to the DOM element.

https://facebook.github.io/react/docs/refs-and-the-dom.html

answered Jul 23, 2017 at 11:51

Raphael Rafatpanah

20.2k28 gold badges106 silver badges176 bronze badges

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

Comments

pethel · Accepted Answer · 2017-07-23 11:53:39Z

2

In react you need to use refs. React manages the rendering so you have no guarantee that your element i accessible the moment you are trying to reach it. It in the constructor so your render haven run yet.

More reading https://facebook.github.io/react/docs/refs-and-the-dom.html

answered Jul 23, 2017 at 11:53

pethel

5,54714 gold badges60 silver badges89 bronze badges

Collectives™ on Stack Overflow

react component class variable access

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