0

This is the full code of App.js

import SimpleStorageContract from "./contracts/SimpleStorage.json";
import getWeb3 from "./utils/getWeb3";

import "./App.css";

class App extends Component {
  state = { storageValue: "", web3: null, accounts: null, contract: null, newValue: "" };

  componentDidMount = async () => {
    try {
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);

      // Get network provider and web3 instance.
      const web3 = await getWeb3();

      // Use web3 to get the user's accounts.
      const accounts = await web3.eth.getAccounts();

      // Get the contract instance.
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = SimpleStorageContract.networks[networkId];
      const instance = new web3.eth.Contract(
        SimpleStorageContract.abi,
        deployedNetwork && deployedNetwork.address,
      );

      // Set web3, accounts, and contract to the state, and then proceed with an
      // example of interacting with the contract's methods.
      this.setState({ web3, accounts, contract: instance }, this.runExample);
    } catch (error) {
      // Catch any errors for any of the above operations.
      alert(
        `Failed to load web3, accounts, or contract. Check console for details.`,
      );
      console.error(error);
    }
  };

  handleChange(event){
    this.setState({newValue: event.target.value});
 }

  async handleSubmit(event){
    event.preventDefault();
    const { accounts, contract } = this.state;
    await contract.set(this.state.newValue, {from: accounts[0]});
    const response = await contract.get();
    this.setState({storageValue: response})
 }

  runExample = async () => {
    const { contract } = this.state;

    // Get the value from the contract to prove it worked.
    const response = await contract.methods.get().call();

    // Update state with the result.
    this.setState({ storageValue: response });
  };

  render() {
    if (!this.state.web3) {
      return <div>Loading Web3, accounts, and contract...</div>;
    }
    return (
      <div className="App">
        <h1>Welcome to your first successful dApp!</h1>
        <div>I like {this.state.storageValue}</div>
        <form onSubmit={this.handleSubmit}>
          <input type = "text" value = {this.state.newValue} onChange={this.handleChange.bind(this)}/>
          <input type = "submit" value = "Submit"/>
        </form>
      </div>
    );
  }
}

export default App;````


Error:
**Unhandled Rejection (TypeError): contract.set is not a function**

This error is generated on clicking the submit button.  
  • 1
    The error message tells you contract.set is not a function, what more information do you need??? Start by console.log(JSON.stringify(contract));, in order to see the structure of this object. I bet you could easily find your way from there. This website is not a debug service, and you should show what you've tried when asking for help. – goodvibration Apr 24 at 16:19
  • @goodvibration - I am just learning to really don't know where else to turn. I don't know what you mean by "Start by console.log(JSON.stringify(contract))" but I have pasted the full code for the App.js file. I have tried to debug using the browser inspect tool but it basically said the same thing. – A Cameron Apr 25 at 19:34
0

There is some problem with the version. Try this -

handleSubmit = async event => {
    const { contract, accounts } = this.state;
    event.preventDefault();
    await contract.methods.registerProperty(this.state.newValue).send({ from: accounts[0] });
    const response = await contract.methods.get().call();
    this.setState({ storageValue: response });
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.