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

Your Answer

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

Browse other questions tagged or ask your own question.