Uncaught TypeError: Cannot read property 'value' of null in React

0
votes

im new to React and I keep getting this error tried a few suggestions I found around but none seemed to work for me. Im guessing the error has to do with the way react compiles.It just doesn't seem to find my "symbol" id in the render method. Thanks in advance for the help.

My Error

App.js:101 Uncaught TypeError: Cannot read property 'value' of null

at App.registerTrade (App.js:101)
at App.render (App.js:137)
at ReactCompositeComponent.js:793
at measureLifeCyclePerf (ReactCompositeComponent.js:73)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:792)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:819)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
at Object.mountComponent (ReactReconciler.js:43)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)

Here is my function

registerTrade() {

      var contract = require('truffle-contract')
      var tradeRegistry = contract(tradeRegistryContract);
      var self = this;

      var amount = parseInt(document.getElementById("amount")).value;
      var symbol = document.getElementById("symbol").value;

      this.setStatus("Registering trade... (please wait)");

      var meta; 

      tradeRegistry.deployed().then(function(instance) {
        meta = instance;
        return meta.registerSale(amount, symbol);
      }).then(function() {
        self.setStatus("Trade registered!");
      }).catch(function(e) {
        console.log(e);
        self.setStatus("Error registering trade; see log.");
      });
    }

the React render method 

render() {

      return (
        <div className="App">
          <nav className="navbar pure-menu pure-menu-horizontal">
              <a href="#" className="pure-menu-heading pure-menu-link">Trade Registry</a>
          </nav>



         <main className="container">
          <div className="pure-g">
            <div className="pure-u-1-1">
             <h1>Welcome</h1> 
             <br></br>
             <h3>Register your trade</h3>
             <br></br><label for="amount">Amount:</label><input type="text" id="amount" placeholder="e.g., $420"></input>
             <br></br><label for="symbol">Symbol:</label><input type="text" id="symbol" placeholder="e.g., TSLA"></input>
             <br></br><button id="send" onClick={this.registerTrade()}>Register Trade</button>
             <br></br>
             <span id="status"></span>
             <br></br>
             <br></br>
             <span id="block"></span>
             <br></br>
             <span id="evntAddress"></span>
             <span id="evntAmt"></span>
             <span id="evntSymbol"></span>
            </div>
          </div>
        </main>
      </div>     

      );
   }
2
javascriptreactjsreact-domweb3

2 Answers

0
votes

I think you are parsing the dom element instead of the value. Try:

var amount = parseInt(document.getElementById("amount").value, 10);
0
votes

So i found my answer I had to declare state variables and then call them from my html elements, like so.

  constructor(props) {
super(props)

this.state = {
inputAmt:'',
inputSym:''
}

<br></br><label htmlFor="amount">Amount:</label><input value={this.state.inputAmt} onChange={amt => this.updateInputAmt(amt)} type="text" id='amount' placeholder="e.g., $420" />
<br></br><label htmlFor="symbol">Symbol:</label><input value={this.state.inputSym} onChange={sym => this.updateInputSym(sym)} type="text" id='symbol' placeholder="e.g., TSLA" />