title: React warning: "is changing an uncontrolled input of type hidden to be controlled" why?
body: <p>I don't know how to fix this warning. This is the component that is sending the warning:</p>
  
  <p><strong>Warning: ReporteBoxMapRaster is changing an uncontrolled input of type hidden to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: htt fb sitereact-controlled-components</strong></p>
  
  <pre><code>var ReporteBoxMapRaster = React.createClass({
      print: function(){
          $(ReactDOM.findDOMNode(this.refs.print_form)).submit();
      },
  
      render: function() {
          if( this.props.extent ){
              var legend = null;
              switch( this.props.legend ){
                  case 'solid':
                      legend = &lt;ReporteLegendSolid values={ this.props.values } /&gt;;
                  break;
                  case 'gradient':
                      legend = &lt;ReporteLegendGradient values={ this.props.values } /&gt;;
                  break;
              }
  
              if( this.props.extra )
                  var extra = this.props.extra;
              else
                  var extra = '';
  
              var extent = this.props.extent;
              var url = 'http://XXX.XXX.XXX/cgi-bin/mapserv?SERVICE=WMS&amp;VERSION=1.3.0&amp;REQUEST=GetMap&amp;FORMAT=image/png&amp;TRANSPARENT=true&amp;';
              url += 'LAYERS='+ this.props.layer +'&amp;';
              url += 'map=/opt/mapfile/reporte/'+ this.props.mapfile +'.map&amp;';
              url += 'TILED=false&amp;WIDTH=780&amp;HEIGHT=440&amp;STYLES=&amp;';
              url += 'CRS=EPSG:' + this.props.epsg + '&amp;';
              url += 'BBOX=' + extent[0] + ',' + extent[1] + ',' + extent[2] + ',' + extent[3];
              url += extra;
  
              return (
                  &lt;div className="uk-width-large-2-2 reporte-box reporte-box-target" &gt;
                      &lt;div className="md-card md-card-hover md-card-overlay " &gt;
                          &lt;div className="md-card-toolbar full2"&gt;
                              &lt;div className="md-card-toolbar-actions"&gt;
                                  &lt;Full_screem_inter /&gt;
                                  &lt;span onClick={this.print} &gt;&lt;i className="md-icon material-icons md-card-overlay-toggler" &gt;print&lt;/i&gt;&lt;/span&gt;
                              &lt;/div&gt;
                              &lt;h3 className="md-card-toolbar-heading-text"&gt;{ this.props.title }&lt;/h3&gt;
                          &lt;/div&gt;
                          &lt;div className="md-card-content uk-text-center" &gt;
                              &lt;div className="" &gt;
                                  &lt;div className="map-container" &gt;
                                      &lt;img className="mapimage" ref="mapImageBG" src={ this.props.bgimage } /&gt;
                                      &lt;img className="mapimage" ref="mapimageWMS" src={ url } /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div className="reporte-onlyonfull"&gt;
                                  Leyenda
                              &lt;/div&gt;
                              &lt;div&gt;
                                  { legend }
                              &lt;/div&gt;
  
                              &lt;div className="reporte-onlyonfull"&gt;
                                  &lt;div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="md-card-footer" &gt;&lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;form ref="print_form" action={ Routing.generate("exportmaptopdf") } method="post" target="_blank" className="hidden" &gt;
                          &lt;input name="legend" type="hidden" value={JSON.stringify( this.props.values )} /&gt;
                          &lt;input name="legendType" type="hidden" value={this.props.legend} /&gt;
                          &lt;input name="title" type="hidden" value={this.props.title} /&gt;
                          &lt;input name="bgsrc" type="hidden" value={this.props.bgimage} /&gt;
                          &lt;input name="src" type="hidden" value={ encodeURI( url ) } /&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              );
          }
          else
              return (&lt;div&gt;&lt;/div&gt;);
      }
  });
  module.exports = ReporteBoxMapRaster;
  </code></pre>