Currently following a beginner React tutorial, but the name value I am trying to display is showing as undefined

I am unsure why the input is not updating the name variable as undefined is always displayed

Here is my html code

<!DOCTYPE html>
<html>

<head>
    <title>My First React Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="refscript.jsx" type="text/jsx"></script>
</head>

<body>
    <div id="content"></div>
</body>

</html>

And this is my jsx file named refscript.jsx

var RefComponent = React.createClass({
    display: function(){
        var name = this.inputdemo.value;
        document.getElementById('dispName').innerHTML = name;

    },

    render:function(){
        return(
            <div>
                <h2>Name: <input type="text" ref ={input => this.inputdemo = input}/></h2><br/>
                <button onClick={this.display}>Click</button>
                <h1>Hi...<span id='dispName'></span></h1>
            </div>
        );
    }
});

React.render(
    <RefComponent/>, document.getElementById('content')
)