title: TypeError: Cannot read property 'methods' of null
body: <p>I am working on a very basic erc721 token minting dapp using react and web3. I created an arrow function to mint the tokens but I keep getting an error that the methods is not defined when I try to mint a new token... I am still a beginner so I apologize if there are any rookie mistakes.</p>
  
  <p>my react code</p>
  
  <pre><code>import React, { Component } from "react";
  import AsycentTokenContract from "./contracts/AsycentToken.json";
  
  import Web3 from "web3";
  
  import "./App.css";
  
  class App extends Component {
    state = {account: '', contract: null, totalSupply:0, colors: []};
  
    async componentWillMount() {
      await this.loadWeb3()
      await this.loadBlockchainData()
    }
  
    async loadWeb3() {
      if(window.ethereum) {
        window.web3 = new Web3(window.ethereum)
        await window.ethereum.enable()
      }
      else if (window.web3) {
        window.web3 = new Web3(window.web3.currentProvider)
      }
      else {
        window.alert('non Ethereum browser detected. Dowload Metamask')
      }
    }
  
    async loadBlockchainData() {
      const web3 = window.web3
      //load accounts
      const accounts = await web3.eth.getAccounts()
      this.setState({account: accounts[0]})
      //load contract
      const networkId = await web3.eth.net.getId()
      const networkData =  AsycentTokenContract.networks[networkId]
      if(networkData) {
        const abi = AsycentTokenContract.abi
        const address = networkData.address
        console.log(address)
        const contract = new web3.eth.Contract(abi, address)
        console.log(contract)
        const totalSupply = await contract.methods.totalSupply().call()
        this.setState({totalSupply})
        //Load Colors
        for(var i = 1; i &lt;= totalSupply; i++) {
          const color = await contract.methods.colors(i - 1).call()
          this.setState({
            colors: [...this.state.colors, color]
          })
          console.log(this.state.colors)
        }
      } else{
        window.alert('Smart contract not deployed to detected network')
      }
  
    }
  
    mint = (color) =&gt; {
      console.log(color)
      this.state.contract.methods.mint(color).send({from: this.state.account})
      .once('receipt', (receipt) =&gt; {
        this.setState({
          colors: [...this.state.colors, color]
        })
      })
    }
  
  
  
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;{this.state.account}&lt;/h1&gt;
          &lt;div&gt;
            &lt;h1&gt;Issue Token&lt;/h1&gt;
            &lt;form onSubmit={(e) =&gt; {
              e.preventDefault()
              const color = this.color.value
              this.mint(color)
            }}&gt;
              &lt;input 
                type="text"
                placeholder='ex #FFFFFF'
                ref={(input) =&gt; {
                  this.color = input
                }}
              /&gt;
              &lt;input type="submit"
              value="MINT"
              /&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;div&gt;{this.state.colors.map((color, key) =&gt;{
           return(
              &lt;div key={key}&gt;
                &lt;div className='token' style={{backgroundColor: color}}&gt;&lt;/div&gt;
                &lt;div&gt;{color}&lt;/div&gt;
            &lt;/div&gt;)
          })}&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>smart contract code</p>
  
  <pre><code>pragma solidity &gt;=0.4.21 &lt;0.7.0;
  
  import "../node_modules/@openzeppelin/contracts/token/ERC721/ERC721.sol";
  
  contract AsycentToken is ERC721 {
  
      string[] public colors;
      mapping(string =&gt; bool) _colorExists;
  
      string public _name = "AsycentToken";
      string public _symbol = "AT";
  
      constructor () ERC721(_name, _symbol) public {
      }
  
      function mint(string memory _color) public {
          require(!_colorExists[_color], 'color already exists');
          colors.push(_color);
          uint _id = colors.length;
          _mint(msg.sender, _id);
          _colorExists[_color] = true;
      }
  }
  </code></pre>
  
  <p>the error</p>
  
  <p>TypeError: Cannot read property 'methods' of null
  App.mint</p>
  
  <pre><code>C:/Users/Shawn/react-nft-minter/client/src/App.js:62
    59 | mint = (color) =&gt; {
    60 |   console.log(color)
    61 |   const web3 = window.web3
  &gt; 62 |   this.state.contract.methods.mint(color).send({from: this.state.account})
       | ^  63 |   .once('receipt', (receipt) =&gt; {
    64 |     this.setState({
    65 |       colors: [...this.state.colors, color]
  </code></pre>
  
  <p>View compiled</p>
  
  <p>onSubmit</p>
  
  <pre><code>C:/Users/Shawn/react-nft-minter/client/src/App.js:82
    79 | &lt;form onSubmit={(e) =&gt; {
    80 |   e.preventDefault()
    81 |   const color = this.color.value
  &gt; 82 |   this.mint(color)
       | ^  83 | }}&gt;
    84 |   &lt;input 
    85 |     type="text"
  </code></pre>
  
  <p>View compiled
  ▶ 22 stack frames were collapsed.
  This screen is visible only in development. It will not appear if the app crashes in production.
  Open your browser’s developer console to further inspect this error.</p>