reactjs - How to make Material-UI Dynamic + Modifiable List? -


so far, i've made this:

youtube video - problem visualized here

although, have frustrating problem.

as can see in youtube video, whichever item list delete, re-renders without last one.

code behind this:

@observer export default class listinterface extends component {     @observable datasource = [];     @observable itemtoadd = "";     constructor(props) {         super(props);         let {id} = this.props;         this.state = { id };     }     @action updateitemtoadd(searchtext, datasource, params) {         this.itemtoadd = searchtext;     }     @action handlechange(searchtext, datasource, params, index) {         this.datasource[index] = datasource;     }      @action addobject() {         this.datasource.push({productname: this.itemtoadd});         console.log("added component!");         console.log(this.itemtoadd);         console.log("----------------------------\n");         this.itemtoadd = "";     }      @action removeobject(index) {         console.log("removed component!");         console.log(this.datasource[index].productname);         this.datasource.splice(index-1, 1);         console.log(this.datasource);         console.log("----------------------------\n");     }      getobject(i) {         return this.datasource[i];     }      getlist() {         return this.datasource.slice();     }      createui() {         let uiitems = [];         let i;         for(i = 0; < this.datasource.length; i++) {             uiitems.push(                 <div classname="listitem" key={i}>                     <col sm={10}>                         <muithemeprovider>                             <textfield                                 id={i.tostring()}                                 value={this.state.datasource[i].productname}                                 floatinglabeltext="product"                                 disabled={true}                                 fullwidth={true}                             />                         </muithemeprovider>                     </col>                     <col sm={2}>                         <muithemeprovider id={i.tostring()}>                             <floatingactionbutton                                 mini={true}                                 secondary={true}                                 onclick={this.removeobject.bind(this, i)}                                 classname="listbutton"                             >                                 <contentremove/>                             </floatingactionbutton>                         </muithemeprovider>                     </col>                 </div>             );         }          uiitems.push(             <div classname="listadditem" key={this.datasource.length}>                 <col sm={10}>                     <muithemeprovider>                         <autocomplete                             id={i.tostring()}                             floatinglabeltext="product"                             datasource={["apostolis", "orestis", "germanos", "kwnstantina", "tasos"]}                             openonfocus={true}                             onupdateinput={this.updateitemtoadd.bind(this)}                             fullwidth={true}                          />                     </muithemeprovider>                 </col>                 <col sm={2}>                     <muithemeprovider>                         <floatingactionbutton                             mini={true}                             classname="listbutton"                             onclick={this.addobject.bind(this)}                         >                             <contentadd/>                         </floatingactionbutton>                     </muithemeprovider>                 </col>             </div>         );          return uiitems;     }      render() {         let {id} = this.state;         return (             <div id={id} classname="listinterface">                 <panel header={id}>                     <form>                         {this.createui()}                     </form>                 </panel>             </div>         );     } }

i don't understand logic behind this. i've watched countless videos , docs on reactjs, reactjs reloads reactdom don't understand in specific case, how? why last component instead of the 1 selected deleted? isn't supposed re-render createui() once uses controlled variables? cause grab correct elements list?

my thought on this, once object deleted datasource array, causes --datasource.length , starts re-rendering. , maybe react realizes texts controlled, causes two-way binding , pushes values datasource, causes last 1 removed missing. possibly i'm wrong , else going on.

possibly bug somewhere else can't detect.

i come in stackoverflow last, when can't find else. sorry if don't find question pleasing.

flow: (my understanding far)

render() -> calls createui()

createui() -> returns list of controlled components @observable variables

plus sign button -> calls addobject(), adds @observable itemtoadd in datasource list -> this causes re-rendering means react calls createui() again? renders again item in datasource list?

minus sign button -> calls removeobject(), removes object in index given binded component -> then should "re-render" createui() function in respect new data in datasource. bug happens , instead last visualized component removed, but correct object datasource removed. why?


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