将DOM元素插入React组件

Question

I am using django as backend and most of it as frontend as well, the exception is one form that is made in reactjs. To speed up loading of this form I would like to load it's data by grabing it from html instead of using request. Django would send the data and form on loading the page and another request would not be neccessary. I managed to grab the data, which is html, but I am running in to following error:

Uncaught (in promise) Error: Objects are not valid as a React child (found: [object HTMLOptionElement]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method

For testing purposes I am grabing html from another form that looks like this:

<select name="tz" border="solid 1px #F6892D" id="id_tz">
  <option value="Africa/Abidjan">Africa/Abidjan</option>
  (...)
  <option value="" selected=""></option>
</select>

It happens after the component mounted:

componentDidMount = () => {
    document.addEventListener("DOMContentLoaded",  (event) => { 
        var tz_options = document.getElementById('id_tz');
        this.setState({tz:Array.from(tz_options)});
    });
}

I also tried to solve the error by adding toArray function and installing the createFragment addon, but it didn't help:

function toArray(obj) {
   var array = [];
   for (var i = obj.length >>> 0; i--;) { 
   console.log(obj[i].value)
   array[i] = createFragment(obj[i]);
   }
  return array;
} 

This is how i am trying to render it and it's also the place that yields above shown error:

                    <select 
                        value={this.state.value} 
                        className="form-control" 
                        id={this.props.id} 
                        ref={this.props.id} 
                        onChange={this.handleChange}>

                        {   
                            tz_options.map(function (item) {
                                x+=1;
                                if (item.value) {
                                    item.key = item.value;
                                } else {
                                    item.key = String(x);
                                }
                                    return item;                                   
                            })
                        }
                    </select>

Answer 1

You should render your select using option elements to represent its children:

<select 
    value={this.state.value} 
    className="form-control" 
    id={this.props.id} 
    ref={this.props.id} 
    onChange={this.handleChange}>

    {   
        tz_options.map(function (item) {
            x+=1;
            var key;
            if (item.value) {
                key = item.value;
            } else {
                key = String(x);
            }
            return <option key={key} value={item.value}>{item.key}</option>;                                   
        })
    }
</select>