CheckboxTree not updating nodes


Good Day everyone,

I’m using a treeview that you can find here

class TreeView extends React.Component {
  constructor() {
      super();

      this.state = {
          checked: [],
          expanded: [],
      };
  }


  render() {
      
          return (
              
              <CheckboxTree 
                  
                  nodes={nodes}
                  checked={this.state.checked}
                  expanded={this.state.expanded}
                  onCheck={checked => this.setState({ checked })}
                  onExpand={expanded => this.setState({ expanded })}
              />
      
      )
  
}
}

It is a class component. I try to use it as a function component so I wrote it as below:

function TreeView (props) {
  const [item_checked,setItemChecked]   = useState([]);
  const [item_expanded,setItemExpended]  = useState([]);
      
          return (
              
              <CheckboxTree 
                  
                  nodes={nodes}
                  checked={item_checked}
                  expanded={item_expanded}
                  onCheck={checked => setChecked({ checked })}
                  onExpand={expanded => setExpended({ expanded })}
              />
      
      )
  
}

The first thing is that I’m not sure about the syntax I’m using for onCheck={checked => setChecked({ checked })} because it raises the following error:

enter image description here

I tried to remove the curly brackets. It doesn’t raise any error no more but the treeview isn’t rendering the nodes that I pass in props.

I am calling the nodes from the file query.js, where I am using a fetch to retreive some data:



function get_from_url (key,data_array,nodes) {     
                        
    
    if (key==='regions'){url='/regions'}
    if (key==='services'){url='/services'}
    
    fetch(url,{
        method:'GET',
        mode:"no-cors",
        headers: {
            Accept: 'application/json',
            }
                }
        )
    .then(response => response.json())   
   .then((data) =>{ 

        data_array[key]=data;// storing the data into "incoming data"
        console.log(data_array);
        if (key === 'services'){

            for(let service of data_array.services){                                    // trying to modify dynamicly the nodes Services
            nodes[0].children.push({'value': service.name, 'label':service.name});
            }
            console.log(nodes);

        }
        if (key === 'regions'){
          for(let region of data_array.services){                                    // trying to modify dynamicly the nodes Regions
            nodes[1].children.push({'value': region.name, 'label':region.name});
            }
            console.log(nodes);

        }
    })
}
 
function set_data_into_nodes() {
    let nodes = [{            //the nodes are used in the treeview component
        value: 'services',
        label: 'Services',
        children: [],
    },
    {
        value: 'regions',
        label: 'Regions',
        children: []
        }];
        let data_array = {};
        get_from_url('regions',data_array,nodes);
        //console.log(nodes);
        get_from_url('services',data_array,nodes);
        //console.log(nodes);
        return nodes;

}




export {set_data_into_nodes};

inside Treeview.js I call the function as following:

function TreeView (props) {
    const [item_checked,setItemChecked]   = useState([]);
    const [item_expanded,setItemExpended]  = useState([]);
    const nodes =set_data_into_nodes(); 
    ...
    //etc...
    } 

May somebody help me ?

Thanks in advance

Source: React – Stack Overflow

November 19, 2021
Category : News
Tags: javascript | reactjs | treeview

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.