Browser says 'reactComponent is not defined' in console

Question

I am following a react tutorial but I am stuck. I am trying to change the state of an element in the console. but when i type this

reactComponent.setState({
   isVisible:false
})

I get this error from chrome.

Uncaught ReferenceError: reactComponent is not defined
    at <anonymous>:2:1
    at Object.InjectedScript._evaluateOn (<anonymous>:895:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:828:34)
    at Object.InjectedScript.evaluate (<anonymous>:694:21)

Here's my HTMl and JSX

<div id="app"></div>

    <script src="js/react-0.11.1.js"></script>
    <script src="js/JSXTransformer-0.11.1.js"></script>
    <script type="text/jsx">
        /**@jsx React.DOM*/

        //Main Element with JSX
        var MessageBoxJSX = React.createClass({
            getInitialState: function(){
                return {
                    isVisible: true,
                    titleMessage: 'Hello, World'
                }
            },

            render: function() {

                var inlineStyles = {
                    display: this.state.isVisible ? 'block' : 'none'

                };

                return (
                    <div className = "container" style={inlineStyles}>
                        <h1>{this.state.titleMessage}</h1>
                    </div>
                )
            }
        })

        //Render JSX component
        React.renderComponent(
            <MessageBoxJSX/>,
            document.getElementById('app')
        )
    </script>

I am working with an older version of react but that's what the tutorial uses so I'm following it to understand react.

My question is how do i get the browser to change state without throwing that error?

Answer 1

You do not need to pass the name of the component, like you are doing in reactComponent.setState({ isVisible:false })

Instead you pass a reference to that component using this :

this.setState({ isVisible: false });