My Reactjs Code Says Uncaught TypeError: Cannot read property 'value' of null

Question

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>

only error i get is Uncaught TypeError: Cannot read property 'value' of null — user5323957
– user5323957, Commented Feb 28, 2016 at 16:59

WitVault · Accepted Answer · 2016-02-28 17:10:26Z

5

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.

answered Feb 28, 2016 at 17:10

WitVault

24.2k20 gold badges107 silver badges137 bronze badges

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

4 Comments

user5323957 Over a year ago

i tried var modifiedValue=this.refs.initialValue.getDOMNode().value; and getting error Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by InputBox.

WitVault Over a year ago

You don't need to call getDOMNode(). You can use this.refs.inputValue.getValue()

user5323957 Over a year ago

var InputBox =React.createClass({ update:function(e){ // var modifiedValue=ReactDOM.findDOMNode(this.refs.initialValue).value; // var modifiedValue=this.refs.initialValue.value; var modifiedValue= e.target.value this.props.updateValue(modifiedValue); }, so i have three method one i wrote in here which one should i practicse

user5323957 Over a year ago

yes this this.refs.inputValue.getValue() and update:function(e) also

Alex Moldovan · Accepted Answer · 2016-02-28 17:06:15Z

0

I believe your error is coming from ReactDOM.findDOMNode(this.refs.inputValue).value;. Your ref is initialValue, so the correct code should be

ReactDOM.findDOMNode(this.refs.initialValue).value;

Further more, starting from React 0.14 I think, you can drop the findDOMNode method for reading the value and use

this.refs.initialValue.value

PS: maybe you can rename that ref to avoid the repetitive naming.

answered Feb 28, 2016 at 17:06

Alex Moldovan

2,3661 gold badge18 silver badges14 bronze badges

1 Comment

user5323957 Over a year ago

chenged input value to initialValue and it worked However when i did like var modifiedValue=this.refs.initialValue.getDOMNode().value; and got error Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by InputBox.

Collectives™ on Stack Overflow

My Reactjs Code Says Uncaught TypeError: Cannot read property 'value' of null

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related