Binding data to treeview nodes from array issue in react

Question

I have follow below example to create tree view with check boxes. Its working fine.

https://github.com/jakezatecky/react-checkbox-tree

Now I am trying to add data from my post method. I have fill data to array. But I tried to add it to loop for get data.

const persons = []; 
for (let i = 0; i < data.length; i++) {
  persons = [{ value: data[i].id, label: data[i].name }]; 
}  
this.setState({ persons });

Checkbox code

  render() {
        return (
            <CheckboxTree
                nodes={this.state.persons}
                iconsClass="fa5"
                checked={this.state.checked}
                expanded={this.state.expanded} 
                onExpand={expanded => this.setState({ expanded })}
            />
        );
    }

I am getting only last record in this treeview. but loop is working correctly Please give some suggestions to solve this. thank you

Bibhudatta Sahoo · Accepted Answer · 2023-01-05 04:59:07Z

2

You are getting the last object only because you are re-initialing the person array each time.

Instead you have to push that object to the array.

Try like this:

const persons = [];
for (let i = 0; i < data.length; i++) {
  persons.push({ value: data[i].id, label: data[i].name }) 
}
this.setState({ persons });

answered Jan 5, 2023 at 4:59

Bibhudatta Sahoo

4,9142 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bibhudatta Sahoo Over a year ago

If your issue is resolved then you can give a up-vote for my motivation :).....

AlexDemo Over a year ago

@Bidhudatta Done. Sorry for late

AlexDemo Over a year ago

I have a small question regarding this. If I have children inside this one. then can we use it inside this one without loop it @Bibhudatta Sahoo

Bibhudatta Sahoo Over a year ago

Yes if you have children record then you can add the object children at place of Value label.

AlexDemo Over a year ago

you meant like this persons.push({ value: data[i].id, label: data[i].name, children: [ { value: data[i].id, label: data[i].name}] })

|

Collectives™ on Stack Overflow

Binding data to treeview nodes from array issue in react

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related