Untitled

import { useState } from 'react';
import { Tree } from 'rsuite';

function GoalTree(props) {
    const { goals, updateSelection } = props;

    // const builtTree = [
    //     {'id': 0, 'goal': 'Head', 'children_ids': [1,2]},
    //     {'id': 1, 'goal': 'child1', 'children_ids': []},
    //     {'id': 2, 'goal': 'child2', 'children_ids': []}
    // ]


    const builtTree = [...goals];

    builtTree.forEach((row) => {
        row['value'] = row.id;
        row['label'] = row.goal;

        if(! 'children' in row){
            row['children'] = [];
        }
    });

    while(builtTree.length > 1){
        const goal = builtTree.pop();


        for(let i = 0; i < builtTree.length; i++){
            const goalIsChild = builtTree[i].children_ids.includes(goal.id);            
            if(goalIsChild){
                builtTree[i].children.push(goal);
            }
        }
    }

    return (
        <>
            <Tree data={goals} onChange={value => updateSelection(value)} defaultExpandAll/>
        </>
    )

}

export default GoalTree;