Dynamically adding children using treebeard in react
Sebastian Wright 
I am using treebeard library in react to form a left navigation menu.When data is statically provided everything works fine and i can toggle nodes and all there children. The code is shown below:
import React, { PureComponent } from 'react';
import { Treebeard } from 'react-treebeard';
const data = { toggled: false, name:cricket, children: [ { name: 'Ipl', children: [ { name: 'CSK VS DD' }, { name: 'MI VS RCB' } ] }, { name: 'International Series', children: [ { name: 'AUS vs NZ', children: [ { name: 'T20' }, { name: 'ODI' } ] } ] } ]
};
class Tree extends PureComponent { constructor(props) { super(props); this.state = { data }; this.onToggle = this.onToggle.bind(this); } onToggle(node, toggled) { const { cursor, data } = this.state; if (cursor) { console.log(data); this.setState(() => ({ cursor, active: false })); } node.active = true; if (node.children) { node.toggled = toggled; } this.setState(() => ({ cursor: node, data: Object.assign({}, data) })); } render() { const { data } = this.state; return ( <Treebeard data={data} onToggle={this.onToggle} /> ); }
}
export default Tree;But when i am trying to add children dynamically in the root nodes and add children to its children then i am able to toggle root node but not its children. Also the data object is showing nodes,its children and there children correctly on console.log(data). The code is shown below:
import React, { PureComponent } from 'react';
import { Treebeard } from 'react-treebeard';
const data = { toggled: false, name:'cricket', children: []
};
class Tree extends PureComponent { constructor(props) { super(props); this.state = { data }; this.onToggle = this.onToggle.bind(this); } addChildren = (data) => { data.children = [ { name: "Sussex v Essex" }, { name: "Hampshire v Kent" }, { name: "Middlesex v Surrey" }, { name: "Yorkshire v Lancashire" } ] } onToggle(node, toggled) { const { cursor, data } = this.state; if (cursor) { console.log(data); this.setState(() => ({ cursor, active: false })); } node.active = true; data.children=[ { name:'IPL' }, { name:'T20' } ] this.addChildren(data.children[0]); if (node.children) { node.toggled = toggled; } this.setState(() => ({ cursor: node, data: Object.assign({}, data) })); } render() { const { data } = this.state; return ( <Treebeard data={data} onToggle={this.onToggle} /> ); }
}
export default Tree;Sandbox Link:
5 Related questions 1 Tree Table - Setting children on react.js 0 Adding Child Elements Dynamically in ReactJS 0 React - Tree Component Related questions 1 Tree Table - Setting children on react.js 0 Adding Child Elements Dynamically in ReactJS 0 React - Tree Component 1 react create dynamic tree recursively 1 React: Create a new element from all children while adding props 3 Add children to React element 0 React - create recursive children 1 react dynamically add children to jsx/component 2 How to Add an item to All Tree Array's Objects in Js? 3 Add a child to tree with useState Load 7 more related questions Show fewer related questions Reset to default
