My Reactjs code says no input TypeError: Unable to read property 'value' of null

advertisements

I Am Trying To Make A Programme Which Displays The Changes Made In Input Value To Output Box But Getting Error Like Uncaught Type Error: Cannot read property 'value' of null And I Have No Idea What Is The Error Here

var App =React.createClass({
    getInitialState:function(){
        return{
            value:"My Value"
        }
    },
    updateValue:function(modifiedValue){
        this.setState({
            value:modifiedValue
        })
    },
    render:function(){
        return(
            <div className="inputBox container-fluid">
                <h1 className="text-center text-primary">Hello FreeCodeCampers !!!</h1>
                <div className="row col-md-12">
                    <InputBox value={this.state.value} updateValue={this.updateValue}/>
                    <h1>{this.state.value}</h1>
                </div>
            </div>
        );
    }
});
var InputBox =React.createClass({
    update:function(){
        var modifiedValue=ReactDOM.findDOMNode(this.refs.inputValue).value;
        this.props.updateValue(modifiedValue);
    },
    render:function(){
        return(
            <input type="text" value={this.props.value} onChange={this.update} ref="initialValue"/>
        );
    }
});
ReactDOM.render(<App />,
document.querySelector("#app")
);
<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>React Tutorial</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>

With your version of react (React v0.14 and above) you don't need to call ReactDOM.findDOMNode(this.refs.inputValue)

this.refs.inputValue gives you actual dom node. You can call the methods such as getValue() to get the value of that node.

I hope this would solve your issue.