CODEWITHSUNDEEP
htmlreactjsparameters
user10421953
user10421953

Reputation:

Passing a html value as a parameter in react

I need to pass a html value as a parameter for my function like so:

<input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode"className="nice-textbox"/>

<button id="button" onClick={parseAddress("document.getElementById('smartcontract').value)"}>Submit!</button>

but Im getting an error: TypeError: Cannot read property 'value' of null

here is the Full code. Added this to give a better impression of whats going on cause the fixes below don't seem to fix it all. Any help is welcomed.

class App extends Component {
  parseAddress(_smartcontract){

    var contractObj = new ethweb3.eth.Contract(ERC20ABI, document.getElementById('smartcontract').value);
      contractObj.getPastEvents(
          'Transfer' || 'allEvents',
          {
              fromBlock: 0,
              toBlock: 'latest'
          },
          function(err,res){
              console.log(err,res);
              //examples to access the data returned
              console.log(res.length);
              document.getElementById("totalAddresses").innerHTML = res.length;
              document.getElementById("sampleAddress").innerHTML = res[0].returnValues.from;
              document.getElementById("sampleAmount").innerHTML = res[0].returnValues.value;
          }
      );
  }
deploSC = async () => {
  const accounts = await goweb3.eth.getAccounts();

//const code = ethweb3.eth.getCode(document.getElementById('smartcontract').value); Not working 
console.log(code);
  goweb3.eth.sendTransaction({
      from: accounts[0],
      data: document.getElementById('scbytecode').value
  }, function(error, hash){
      console.log(error,hash);
  });
}

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <p>
            Enter the smart contract address:
            <input type="text" name="name" id="smartcontract" className="nice-textbox"/>
            <input type ="text" placeholder="Sc bytecode" name="name" id ="scbytecode"className="nice-textbox"/>
            <button id="button" onClick={this.parseAddress}>Submit!</button>
            <button onClick={this.deploSC}> Deploy Sc</button>
          </p>
          <p id="totalAddresses">0</p>
          <p id="sampleAddress">0</p>
          <p id="sampleAmount">0</p>


        </header>
      </div>
    );
  }
}

export default App;

Upvotes: 2

Views: 4235

Answers (2)

Shiva Kumar Routhu
Shiva Kumar Routhu

Reputation: 1

I think there is mismatch in id. line 1 you gave "scbytecode" line 2 you are trying access by id "smartcontract" which is not present, so you are seeing null

Upvotes: 0

Shawn Andrews
Shawn Andrews

Reputation: 1442

There is a better way to do this in React using state and not directly accessing the DOM which should be avoided.

Store the value of an input in the component's state, then give it to the button's onClick event handler via this.state.inputVal.

class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          inputVal: ''
      };
  }

  inputChanged = (e) => {
      this.setState({ inputVal: e.target.value });
  }

  render() {
    return (
      <div>
        <input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode" className="nice-textbox" onChange={this.inputChanged}/>

        <button id="button" onClick={() => { console.log(this.state.inputVal); }}>Submit!</button>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App/>,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 1

Related Questions