PrimeReact Issue Template

<!DOCTYPE html>
<html>

  <head>
    <title>PrimeReact QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    
    <!-- PrimeReact style dependencies -->
    <link rel="stylesheet" href="https://unpkg.com/primereact@1.4.0/resources/themes/omega/theme.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact@1.4.0/resources/primereact.min.css" />
    
    <!-- Configure SystemJS -->
    <script src="https://unpkg.com/systemjs@0.20"></script>
    <script src="systemjs.config.js"></script>
  </head>

  <body>
    <div id="root"></div>
  </body>

</html>

body {
  padding: 2em;
  font-family: Arial, Helvetica, sans-serif;
}

# PrimeReact Issue Template
Please create a test case and attach the link of the plunkr to your github issue report.

/*global System */
'use strict';

System.config({
    transpiler: 'plugin-babel',
    babelOptions: {
        sourceMaps: false,
        stage0: true,
        react: true
    },
    meta: { },
    paths: {
      'npm:': 'https://unpkg.com/'
    },
    map: {
      // our app is within the app folder
      app: 'app/index.jsx', 
      "plugin-babel": 'https://unpkg.com/systemjs-plugin-babel@0.0.25/plugin-babel.js',
      "systemjs-babel-build": 'https://unpkg.com/systemjs-plugin-babel@0/systemjs-babel-browser.js',
      "react": "npm:react@16/umd/react.development.js",
      "react-dom": "npm:react-dom@16/umd/react-dom.development.js",
      "prop-types": "npm:prop-types/prop-types.js",
      "classnames": "npm:classnames@2.2.5",
      "font-awesome": "npm:font-awesome@4.7.0",
      "react-scripts": "npm:react-scripts@1.0.11",
      "react-transition-group": "npm:react-transition-group@2.2.1",
      "primereact": "npm:primereact@1.4.0"

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      'https://unpkg.com/' : { defaultExtension: false },
    }
});
 
System.import('app');

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';
import {Button} from 'primereact/components/button/Button';
import {treeData} from './../dataHelper.js'; 
import {Tree} from 'primereact/components/tree/Tree';

export default class App extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
          treeData,
          selectedNode: null
        }
    }

   modifyNodeLabel = ()=>{
      const id = Math.floor(Math.random()*1000);
      const newTree = this.state.treeData;
      treeData[1].label="2> Pictures changed "+id;
       this.setState({
        treeData:newTree
      })
   }

    addNewNodeAndSelect = ( parentId)=>{
      const id = Math.floor(Math.random()*100);
      const newNodeData =   {
                    "label": id+ "> New Node ",
                    "data": {
                      id,
                      parentId
                    },
                    "expandedIcon": "fa-folder-open",
                    "collapsedIcon": "fa-folder",
                    "children": [],
                    "selected": true,
                    "isSelected": true,
                    "expanded": true
                }
      const newTree = this.modifyTree(this.state.treeData,newNodeData );
      this.setState({
        treeData:newTree
      })
    }

     modifyTree = (currentTree, nodeAdd) =>{
       return currentTree.map((node)=>{
         if (node.children){
               if (node.data.id === nodeAdd.data.parentId){
                 node.expanded=true;
                 node.children.push(nodeAdd);
               }else{
                    node.children = this.modifyTree(node.children, nodeAdd);
               }
               return node;
           }else{
                if ( node.data.id === nodeAdd.data.parentId){
                  node.expanded=true;
                    node.children= [];
                    node.children.push(nodeAdd);
                }
               return node;
           }
       });
    }
    
    onSelectNode = (selectedEvent) => {
      this.setState({
        selectedNode: selectedEvent.selection.label
      })
    }
    
    render() {
        return (
          <div className="App">
            <div>
              <h2>PrimeReact Issue : https://forum.primefaces.org/viewtopic.php?f=57&t=55696 </h2>

            </div>
            <div>
              <Button label="Add node to NODE 1" onClick={()=>this.addNewNodeAndSelect(1)} />
                <Button label="Add node to NODE 2" onClick={()=>this.addNewNodeAndSelect(2)} />
                <Button label="Modify NODE 2 label" onClick={()=>this.modifyNodeLabel()} />
                              <p>Selected Node: {this.state.selectedNode}</p>
             <Tree value={this.state.treeData} selectionMode="single" selectionChange={this.onSelectNode}/>
            </div>
          </div>
        );
    }
}

export const treeData = [
            {
                "label": "1 > Documents",
                "data": {id:1},
                "expandedIcon": "fa-folder-open",
                "collapsedIcon": "fa-folder",
                "children": [{
                    "label": "111 > Work",
                    "data": {id: 111},
                    "expandedIcon": "fa-folder-open",
                    "collapsedIcon": "fa-folder",
                    "children": [
                      { "label": "11 > Expenses.doc", "icon": "fa-file-word-o", "data":{id:11} }, 
                    { "label": "12 > Resume.doc", "icon": "fa-file-word-o",  "data":{id:12} }
                    ]
                },
                {
                    "label": "112 > Home",
                    "data": {id: 112},
                    "expandedIcon": "fa-folder-open",
                    "collapsedIcon": "fa-folder",
                    "children": [{ "label": "21> Invoices.txt", "icon": "fa-file-word-o", "data":{id:21}}]
                }]
            },
            {
                "label": "2> Pictures",
                "data": {id: 2},
                "expandedIcon": "fa-folder-open",
                "collapsedIcon": "fa-folder",
                "children": [
                    { "label": "31 >barcelona.jpg", "icon": "fa-file-image-o", "data":{id:31} },
                    { "label": "32 > logo.jpg", "icon": "fa-file-image-o", "data":{id:32} },
                    { "label": "33> primeui.png", "icon": "fa-file-image-o", "data":{id:33} }]
            }
           
        ];