How to change one of the basemaps on a BasemapToggle widget using arcgis js api 4

I have created a BaseMapToggle control using arcgis javascript api 4

require([
"esri/widgets/BasemapToggle",
...


basemapToggle = new BasemapToggle({
view: view,
nextBasemap: map2
});

I tried the following:

// Change Map
basemapToggle.activeBasemap = map3;

I only need two maps, but I need to change the second map to a new value.

But it does not change the current map. What would be the correct way to change one of the two maps on a BasemapToggle widget?

Solution

I think that the BasemapToggle (ArcGIS API - BasemapToggle) widget was not created with the idea of being able to switch the options, just because it does not seem to give an option for it. If you have several basemaps, I think that you should try BasemapGallery widget (ArcGIS API - BasemapGallery).

~~Anyway, if you still want to use BasemapToggle, you can always recreate the widget any time you need. Take a look at the example I made for the case.~~

Well, I was wrong, and I overcomplicate it. You just need to reset nextBasemap property.

Here is the re-work example,

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to widgets using BasemapToggle | Sample | ArcGIS Maps SDK for
      JavaScript 4.27
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.27/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/BasemapToggle"
      ], (Map, MapView, BasemapToggle) => {
        let basemap = "topo-vector";
        let nextBasemap = "hybrid";

        const map = new Map({
          basemap
        });
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-86.049, 38.485],
          zoom: 3
        });
        const toggle = new BasemapToggle({
            view: view,
            nextBasemap
        });
        view.ui.add(toggle, "top-right");
        toggle.watch('activeBasemap', function (newBasemap) {
            let temp = basemap;
            basemap = nextBasemap;
            nextBasemap = temp;
            temp = basemapButton;
            basemapButton = nextBasemapButton;
            nextBasemapButton = temp;
        });

        const bTopoVector = document.getElementById("bTopoVector");
        const bHybrid = document.getElementById("bHybrid");
        const bOceans = document.getElementById("bOceans");
        const bTerrain = document.getElementById("bTerrain");
        let basemapButton = bTopoVector;
        let nextBasemapButton = bHybrid;
        basemapButton.disabled = true;
        nextBasemapButton.disabled = true;
        const nextBasemapChange = (newNextBasemap, newNextBasemapButton) => {
            nextBasemap = newNextBasemap;
            toggle.nextBasemap = nextBasemap;
            nextBasemapButton.disabled = false;
            nextBasemapButton = newNextBasemapButton;
            nextBasemapButton.disabled = true;
        };
        bTopoVector.addEventListener("click", () => nextBasemapChange("topo-vector", bTopoVector));
        bHybrid.addEventListener("click", () => nextBasemapChange("hybrid", bHybrid));
        bOceans.addEventListener("click", () => nextBasemapChange("oceans", bOceans));
        bTerrain.addEventListener("click", () => nextBasemapChange("terrain", bTerrain));
      });
    </script>
  </head>
  <body>
    <div>
        Next Basemap:
        <button id="bTopoVector">Topo Vector</button>
        <button id="bHybrid">Hybrid</button>
        <button id="bOceans">Oceans</button>
        <button id="bTerrain">Terrain</button>
    </div>
    <div id="viewDiv"></div>
  </body>
</html>