javascript - Insert DOM element into React component -

i using django backend , of frontend well, exception 1 form made in reactjs. speed loading of form load it's data grabing html instead of using request. django send data , form on loading page , request not neccessary. managed grab data, html, running in following error:

uncaught (in promise) error: objects not valid react child (found: [object htmloptionelement]). if meant render collection of children, use array instead or wrap object using createfragment(object) react add-ons. check render method

for testing purposes grabing html form looks 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 component mounted:

componentdidmount = () => {     document.addeventlistener("domcontentloaded",  (event) => {          var tz_options = document.getelementbyid('id_tz');         this.setstate({tz:array.from(tz_options)});     }); } 

i tried solve error adding toarray function , installing createfragment addon, didn't help:

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

this how trying render , it's place 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> 

you should render select using option elements represent 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>