React warning: "is changing an uncontrolled input of type hidden to be controlled" why?

Question

I don't know how to fix this warning. This is the component that is sending the warning:

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

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 = <ReporteLegendSolid values={ this.props.values } />;
                break;
                case 'gradient':
                    legend = <ReporteLegendGradient values={ this.props.values } />;
                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&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&';
            url += 'LAYERS='+ this.props.layer +'&';
            url += 'map=/opt/mapfile/reporte/'+ this.props.mapfile +'.map&';
            url += 'TILED=false&WIDTH=780&HEIGHT=440&STYLES=&';
            url += 'CRS=EPSG:' + this.props.epsg + '&';
            url += 'BBOX=' + extent[0] + ',' + extent[1] + ',' + extent[2] + ',' + extent[3];
            url += extra;

            return (
                <div className="uk-width-large-2-2 reporte-box reporte-box-target" >
                    <div className="md-card md-card-hover md-card-overlay " >
                        <div className="md-card-toolbar full2">
                            <div className="md-card-toolbar-actions">
                                <Full_screem_inter />
                                <span onClick={this.print} ><i className="md-icon material-icons md-card-overlay-toggler" >print</i></span>
                            </div>
                            <h3 className="md-card-toolbar-heading-text">{ this.props.title }</h3>
                        </div>
                        <div className="md-card-content uk-text-center" >
                            <div className="" >
                                <div className="map-container" >
                                    <img className="mapimage" ref="mapImageBG" src={ this.props.bgimage } />
                                    <img className="mapimage" ref="mapimageWMS" src={ url } />
                                </div>
                            </div>

                            <div className="reporte-onlyonfull">
                                Leyenda
                            </div>
                            <div>
                                { legend }
                            </div>

                            <div className="reporte-onlyonfull">
                                <div>
                                </div>
                            </div>
                        </div>
                        <div className="md-card-footer" ></div>
                    </div>

                    <form ref="print_form" action={ Routing.generate("exportmaptopdf") } method="post" target="_blank" className="hidden" >
                        <input name="legend" type="hidden" value={JSON.stringify( this.props.values )} />
                        <input name="legendType" type="hidden" value={this.props.legend} />
                        <input name="title" type="hidden" value={this.props.title} />
                        <input name="bgsrc" type="hidden" value={this.props.bgimage} />
                        <input name="src" type="hidden" value={ encodeURI( url ) } />
                    </form>
                </div>
            );
        }
        else
            return (<div></div>);
    }
});
module.exports = ReporteBoxMapRaster;

Answer 1

there are so many things you can improve in that code snippet ;) but answering your question:

Whenever you set a undefined value to the input, you will get that warning. In order to remove the warning, avoid setting undefined and instead set an empty string ''

class Inputs extends React.Component {

  componentWillMount() {
    this.setState({
      // value: '', // <---- this doesn't show the warning!!
      value: undefined, // <---- Undefined value, you get the warning :o
    });
  }

  setValue(event) {
    this.setState({
      value: event.target.value,
    });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          onChange={(event) => this.setValue(event)}
          value={this.state.value}
        />
      </div>
    );
  }
}

Here's a working example: http://jsbin.com/sizaxaf/1/edit?html,js,output

In your case, this.props.title or any of the other props the values are undefined, therefore you get the warning. You can use the defaultProps to set a value when the prop is undefined (an empty string for example).

class Inputs extends React.Component {
  static defaultProps = {
    title: '',
  }

  //...
}