title: How to change network in metamask using react js
body: <p>I am developing my first Dapp, I am using metamask and web3 for this. As far now, I am able to get my wallet balance and connect account to metamask. Now I am trying switch between two networks, I am using handleChainChanged, also I am passing chainId and Networkversion but, it is giving me error. I am uncertain about returning anything from changeNetwork function or I only have to pass  chainId and Networkversion.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useStoreApi } from "./storeApi";
  import { useState } from "react";
  import useWeb3 from "./useWeb3";
  import { Button, TextField } from "@material-ui/core";
  
  import "./App.css";
  
  function App() {
    const { balance, address, message, setAddress, setBalance } = useStoreApi();
    const web3 = useWeb3();
  
    // get user account on button click
    const getUserAccount = async () =&gt; {
      if (window.ethereum) {
        try {
          await window.ethereum.enable();
          web3.eth.getAccounts().then((accounts) =&gt; {
            setAddress(accounts[0]);
            updateBalance(accounts[0]);
            console.log(accounts);
          });
        } catch (error) {
          console.error(error);
        }
      } else {
        alert("Metamask extensions not detected!");
      }
      web3.eth.getChainId().then(console.log);
    };
  
    const updateBalance = async (fromAddress) =&gt; {
      await web3.eth.getBalance(fromAddress).then((value) =&gt; {
        setBalance(web3.utils.fromWei(value, "ether"));
      });
    };
  
    const changeNetwork = async () =&gt; {
      if (window.ethereum) {
        try {
          await window.ethereum.enable();
          window.ethereum._handleChainChanged({
            chainId: 0x1,
            networkVersion: 1,
          });
        } catch (error) {
          console.error(error);
        }
      }
    };
  
    return (
      &lt;div className="App"&gt;
        &lt;header className="App-header"&gt;
          {address ? (
            &lt;&gt;
              &lt;p&gt; Balance: {balance} &lt;/p&gt;
            &lt;/&gt;
          ) : null}
          &lt;Button
            onClick={() =&gt; getUserAccount()}
            variant="contained"
            color="primary"
          &gt;
            Connect your account
          &lt;/Button&gt;
          &lt;Button onClick={changeNetwork} variant="contained" color="primary"&gt;
            Switch to mainnet ethereum
          &lt;/Button&gt;
  
        &lt;/header&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>