Styjun

How to solve constants out of the internal energy equation?

If a warlock with the Repelling Blast invocation casts Eldritch Blast and hits, must the targets always be pushed back?

Examples of subgroups where it's nontrivial to show closure under multiplication?

Will a top journal at least read my introduction?

Why do Computer Science majors learn Calculus?

How exactly does Hawking radiation decrease the mass of black holes?

What does KSP mean?

a sore throat vs a strep throat vs strep throat

What does the "ep" capability mean?

Stop and Take a Breath!

Why was Germany not as successful as other Europeans in establishing overseas colonies?

Why was the Spitfire's elliptical wing almost uncopied by other aircraft of World War 2?

Was there a Viking Exchange as well as a Columbian one?

Pass By Reference VS Pass by Value

Do I have an "anti-research" personality?

A Strange Latex Symbol

Examples of non trivial equivalence relations , I mean equivalence relations without the expression " same ... as" in their definition?

French for 'It must be my imagination'?

Shrinkwrap tetris shapes without scaling or diagonal shapes

Binary Numbers Magic Trick

Why isn't the definition of absolute value applied when squaring a radical containing a variable?

Does the sign matter for proportionality?

How could Tony Stark make this in Endgame?

Controversial area of mathematics

Passing a dynamic JSON into a react treeview (treebeard)

Safely turning a JSON string into an objectHow can I merge properties of two JavaScript objects dynamically?How do I format a Microsoft JSON date?Can comments be used in JSON?How can I pretty-print JSON in a shell script?What is the correct JSON content type?Why does Google prepend while(1); to their JSON responses?How can I pretty-print JSON using JavaScript?Parse JSON in JavaScript?How do I POST JSON data with Curl from a terminal/commandline to Test Spring REST?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I am using a react-based treeview component (https://github.com/storybooks/react-treebeard) for a personal web app. The code pasted below is taken from Treebeard's example folder.

The treeview gets created from an assigned JSON object and mine happens to be dynamic. The initial tree gets created just fine, however when I make any adjustments to the data - it does not render the new JSON object. However, the list DOES appear when I type anything into the search/filter bar

I am very new to React, but my guess is that the component does not register a change in the state when the JSON gets edited, so "Statedata" always remains the same. How would I update the state if my JSON gets changed in an external function?

Here's a link to the example: http://storybooks.github.io/react-treebeard/

class TreeExample extends React.Component 
 constructor() 
 super();
 this.state = data;
 this.onToggle = this.onToggle.bind(this);
 

 onToggle(node, toggled) 
 var cursor = this.state;

 if (cursor) 
 cursor.active = false;
 

 node.active = true;
 if (node.children) 
 node.toggled = toggled;
 

 this.setState(cursor: node);
 
 onFilterMouseUp(e) 
 const filter = e.target.value.trim();
 if (!filter) 
 return this.setState(data);
 
 var filtered = filters.filterTree(data, filter);
 filtered = filters.expandFilteredNodes(filtered, filter);
 this.setState(data: filtered);
 
 render()
 var data: Statedata, cursor = this.state;
 return (

 <StyleRoot>
 <div style=styles.searchBox>
 <div className="input-group">
 <span className="input-group-addon">
 <i className="fa fa-search"/>
 </span>
 <input className="form-control"
 onKeyUp=this.onFilterMouseUp.bind(this)
 placeholder="Search the tree..."
 type="text"/>
 </div>
 </div>
 <div style=styles.component>
 <Treebeard data=Statedata
 onToggle=this.onToggle/>
 </div>
 <div style=styles.component>
 <NodeViewer node=cursor/>
 </div>
 </StyleRoot>
 );
 

javascript json reactjs treeview

share|improve this question

asked Mar 22 at 18:22

Andrew RomanovAndrew Romanov

11

add a comment | 

0

I am using a react-based treeview component (https://github.com/storybooks/react-treebeard) for a personal web app. The code pasted below is taken from Treebeard's example folder.

The treeview gets created from an assigned JSON object and mine happens to be dynamic. The initial tree gets created just fine, however when I make any adjustments to the data - it does not render the new JSON object. However, the list DOES appear when I type anything into the search/filter bar

I am very new to React, but my guess is that the component does not register a change in the state when the JSON gets edited, so "Statedata" always remains the same. How would I update the state if my JSON gets changed in an external function?

Here's a link to the example: http://storybooks.github.io/react-treebeard/

class TreeExample extends React.Component 
 constructor() 
 super();
 this.state = data;
 this.onToggle = this.onToggle.bind(this);
 

 onToggle(node, toggled) 
 var cursor = this.state;

 if (cursor) 
 cursor.active = false;
 

 node.active = true;
 if (node.children) 
 node.toggled = toggled;
 

 this.setState(cursor: node);
 
 onFilterMouseUp(e) 
 const filter = e.target.value.trim();
 if (!filter) 
 return this.setState(data);
 
 var filtered = filters.filterTree(data, filter);
 filtered = filters.expandFilteredNodes(filtered, filter);
 this.setState(data: filtered);
 
 render()
 var data: Statedata, cursor = this.state;
 return (

 <StyleRoot>
 <div style=styles.searchBox>
 <div className="input-group">
 <span className="input-group-addon">
 <i className="fa fa-search"/>
 </span>
 <input className="form-control"
 onKeyUp=this.onFilterMouseUp.bind(this)
 placeholder="Search the tree..."
 type="text"/>
 </div>
 </div>
 <div style=styles.component>
 <Treebeard data=Statedata
 onToggle=this.onToggle/>
 </div>
 <div style=styles.component>
 <NodeViewer node=cursor/>
 </div>
 </StyleRoot>
 );
 

javascript json reactjs treeview

share|improve this question

asked Mar 22 at 18:22

Andrew RomanovAndrew Romanov

11

add a comment | 

I am using a react-based treeview component (https://github.com/storybooks/react-treebeard) for a personal web app. The code pasted below is taken from Treebeard's example folder.

The treeview gets created from an assigned JSON object and mine happens to be dynamic. The initial tree gets created just fine, however when I make any adjustments to the data - it does not render the new JSON object. However, the list DOES appear when I type anything into the search/filter bar

I am very new to React, but my guess is that the component does not register a change in the state when the JSON gets edited, so "Statedata" always remains the same. How would I update the state if my JSON gets changed in an external function?

Here's a link to the example: http://storybooks.github.io/react-treebeard/

class TreeExample extends React.Component 
 constructor() 
 super();
 this.state = data;
 this.onToggle = this.onToggle.bind(this);
 

 onToggle(node, toggled) 
 var cursor = this.state;

 if (cursor) 
 cursor.active = false;
 

 node.active = true;
 if (node.children) 
 node.toggled = toggled;
 

 this.setState(cursor: node);
 
 onFilterMouseUp(e) 
 const filter = e.target.value.trim();
 if (!filter) 
 return this.setState(data);
 
 var filtered = filters.filterTree(data, filter);
 filtered = filters.expandFilteredNodes(filtered, filter);
 this.setState(data: filtered);
 
 render()
 var data: Statedata, cursor = this.state;
 return (

 <StyleRoot>
 <div style=styles.searchBox>
 <div className="input-group">
 <span className="input-group-addon">
 <i className="fa fa-search"/>
 </span>
 <input className="form-control"
 onKeyUp=this.onFilterMouseUp.bind(this)
 placeholder="Search the tree..."
 type="text"/>
 </div>
 </div>
 <div style=styles.component>
 <Treebeard data=Statedata
 onToggle=this.onToggle/>
 </div>
 <div style=styles.component>
 <NodeViewer node=cursor/>
 </div>
 </StyleRoot>
 );
 

javascript json reactjs treeview

share|improve this question

asked Mar 22 at 18:22

Andrew RomanovAndrew Romanov

11

class TreeExample extends React.Component 
 constructor() 
 super();
 this.state = data;
 this.onToggle = this.onToggle.bind(this);
 

 onToggle(node, toggled) 
 var cursor = this.state;

 if (cursor) 
 cursor.active = false;
 

 node.active = true;
 if (node.children) 
 node.toggled = toggled;
 

 this.setState(cursor: node);
 
 onFilterMouseUp(e) 
 const filter = e.target.value.trim();
 if (!filter) 
 return this.setState(data);
 
 var filtered = filters.filterTree(data, filter);
 filtered = filters.expandFilteredNodes(filtered, filter);
 this.setState(data: filtered);
 
 render()
 var data: Statedata, cursor = this.state;
 return (

 <StyleRoot>
 <div style=styles.searchBox>
 <div className="input-group">
 <span className="input-group-addon">
 <i className="fa fa-search"/>
 </span>
 <input className="form-control"
 onKeyUp=this.onFilterMouseUp.bind(this)
 placeholder="Search the tree..."
 type="text"/>
 </div>
 </div>
 <div style=styles.component>
 <Treebeard data=Statedata
 onToggle=this.onToggle/>
 </div>
 <div style=styles.component>
 <NodeViewer node=cursor/>
 </div>
 </StyleRoot>
 );
 

share|improve this question

asked Mar 22 at 18:22

Andrew RomanovAndrew Romanov

11

share|improve this question

asked Mar 22 at 18:22

Andrew RomanovAndrew Romanov

11

asked Mar 22 at 18:22

Andrew RomanovAndrew Romanov

11

asked Mar 22 at 18:22

Andrew RomanovAndrew Romanov

11