title: Mapbox-GL-JS + REACT: linking radio button to switch the layers of the map
body: <p>I am having trouble linking my radio button to switch the layers of the map.</p>
  <p>Below i am adding the code snippets of the working code.</p>
  <p>I am defining two layers which needs to be toggled from two buttons.</p>
  <p>This is my class made for the map!</p>
  <pre><code>export default class Application extends React.Component {
        map;
      
        constructor(props) {
          super(props);
          this.state = {
            active: radios[0],
          };
        }
      
        componentDidUpdate() {
          this.setVisibility();
        }
      
        componentDidMount() {
          const map = new mapboxgl.Map({
            container: this.mapContainer,
            style: {
              version: 8,
              // &quot;glyphs&quot;:'http://localhost:7755/{fontstack}/{range}.pbf',
              // &quot;sprite&quot;: &quot;https://openmaptiles.github.io/klokantech-basic-gl-style/sprite&quot;,
              sources: {
                esri: {
                  type: &quot;raster&quot;,
                  tiles: [
                    &quot;http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}&quot;
                  ]
                }
              },
              layers: [
                {
                  id: &quot;baselayer&quot;,
                  type: &quot;raster&quot;,
                  source: &quot;esri&quot;,
                  minzoom: 3,
                  maxzoom: 15
                }
              ]
            },
            center: [77.594, 16.9716],
            hash: true,
            zoom: 5
          });
      
          map.on(&quot;load&quot;, function() {
              map.addLayer({
              id: &quot;district&quot;,
              type: &quot;fill&quot;,
              source: {
                type: &quot;vector&quot;,
                tiles: [&quot;http://localhost:8080/data/karnataka12/{z}/{x}/{y}.pbf&quot;],
                minzoom: 0,
                maxzoom: 6
              },
              &quot;source-layer&quot;: &quot;karnataka&quot;,
              layout: {
                visibility: &quot;visible&quot;
              },
              paint: {
                &quot;fill-color&quot;: &quot;#cbffcb&quot;,
                &quot;fill-opacity&quot;: 0.3,
                &quot;fill-outline-color&quot;: &quot;blue&quot;
              }
            });
            map.addLayer({
              id: &quot;district2&quot;,
              type: &quot;fill&quot;,
              source: {
                type: &quot;vector&quot;,
                tiles: [&quot;http://localhost:8080/data/andhrapradesh/{z}/{x}/{y}.pbf&quot;],
                minzoom: 0,
                maxzoom: 6
              },
              &quot;source-layer&quot;: &quot;andhrapradesh&quot;,
              layout: {
                visibility: &quot;none&quot;
              },
              paint: {
                &quot;fill-color&quot;: &quot;#f4c430&quot;,
                &quot;fill-opacity&quot;: 0.3,
                &quot;fill-outline-color&quot;: &quot;green&quot;
              }
            });
             function switchLayer(props, layer_id) {
        if ( this.state.vision[i] === true ) {
          map.setLayoutProperty( id, 'visibility', 'none');
        } else {
          map.setLayoutProperty( id, 'visibility', 'visible');
        }
      };
  
      });
  
     
  
    }
  </code></pre>
  <p>This is the code for the navbar which contains two toggle buttons!</p>
  <pre><code>class Settings extends React.Component {
        constructor(props) {
          super(props);
      
          this.state = {
            active: {},
            value: &quot;&quot;,
            checked: true
          };
        }
      
       
        handleInputChange = event =&gt; {
          this.setState({
            [event.target.name]: event.target.value
          });
          console.log(&quot;&quot;)
        };
      
        handleSubmit = event =&gt; {
          event.preventDefault();
          const data = this.state;
          console.log(data);
        };
      
        componentDidMount() {
          document.addEventListener(&quot;click&quot;, this.handleSettingClick, false);
        }
      
        componentWillUnmount() {
          document.removeEventListener(&quot;click&quot;, this.handleSettingClick, false);
        }
      
        handleSettingClick = e =&gt; {
          if (this.node1.contains(e.target)) {
            return;
          } else {
            this.props.onCloseClick();
          }
        };
      
        // onCheck = (e) =&gt; {
        //   this.setState({
        //     checked: !this.state.checked
        //   });
        // }; //for the state of toggle key checked or not
      
        render() {
          console.log(&quot;This button was toggled: &quot; + this.state.value);
      
          const renderRadios = (radios, i) =&gt; {
            return (
              &lt;label&gt;
                &lt;div &gt;
                  &lt;Radio
                    toggle
                    label={radios.value}
                    // onChange={this.onCheck.bind(this)}
                    onChange={() =&gt; this.setState({ active: radios[i]})}               // checked={radios.value}
                  /&gt;
                &lt;/div&gt;
                &lt;br /&gt;
                &lt;br /&gt;
              &lt;/label&gt;
            );
          };
      
          return (
            &lt;div ref={node1 =&gt; (this.node1 = node1)}&gt;
              &lt;nav
                style={{
                  marginTop: &quot;60px&quot;,
                  height: &quot;100%&quot;,
                  padding: &quot;15px 15px 15px 20px&quot;,
                  background: &quot;#fff&quot;,
                  boxShadow: &quot;0px 0px 1px 0px #000&quot;,
                  position: &quot;fixed&quot;,
                  top: &quot;0&quot;,
                  right: &quot;-590px&quot;,
                  minWidth: &quot;590px&quot;,
                  zIndex: &quot;2&quot;,
                  transform: &quot;translateX(-100%)&quot;,
                  transition: &quot;transform 0.3s ease-out&quot;,
                  overflowY: &quot;scroll&quot;
                }}
              &gt;
                &lt;svg
                  style={{
                    width: &quot;40px&quot;,
                    height: &quot;40px&quot;,
                    cursor: &quot;pointer&quot;,
                    padding: &quot;5px 0px 5px 0px&quot;,
                    fill: &quot;#00894a&quot;
                  }}
                  onClick={this.props.onCloseClick}
                &gt;
                  &lt;path d=&quot;M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z&quot;&gt;&lt;/path&gt;
                &lt;/svg&gt;
      
                &lt;h1 style={{ marginLeft: &quot;5px&quot;, marginTop: &quot;5px&quot; }}&gt;Settings&lt;/h1&gt;
                &lt;br/&gt;
      
                &lt;div&gt;
                  &lt;form onSubmit={this.handleSubmit}&gt;
                    &lt;Input
                      fluid
                      action=&quot;Search&quot;
                      placeholder=&quot;Search...&quot;
                      name=&quot;You searched: &quot;
                      onChange={this.handleInputChange}
                      autoFocus
                    /&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
                &lt;br /&gt;
                &lt;br /&gt;
      
                &lt;Divider /&gt;
                &lt;Divider /&gt;
                &lt;Divider /&gt;
      
                &lt;br /&gt;
                &lt;div id=&quot;toggle&quot;&gt;{radios.map(renderRadios)}&lt;/div&gt;
                &lt;br /&gt;
      
                &lt;Divider /&gt;
                &lt;Divider /&gt;
                &lt;Divider /&gt;
      
              &lt;/nav&gt;
            &lt;/div&gt;
          );
        }
      }
  </code></pre>
  <p>I have referred to the examples provided by mapbox.
  But that's not helping!</p>
  <p>**What's needed: **</p>
  <p><em>When we click the toggle button in the settings pane, the layer should be added and when we click the toggle button again, the layer should be removed !</em></p>