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>

Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more