Using RSuite's Tree, Data Is Rendering & Populating But Not Expanding On Default

Question

I am using Rsuite's Tree Component to render data being passed as an array, which I then structure to be a tree. The tree should be fully expanded on load so that the user has an intuitive understanding of the data.

I have a main page and a component called GoalTree, which takes in the state loaded by the main page and passes in a list of goals, which is then structured in the component.

On Page Load When clicking on the component to expand the tree

From my screengrabs, we can see that the component has the data assembled correctly, and renders the data. But it does not default to being expanded.

Main Page:

import axios from "axios";
import {createPath, useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
// import CopyButton from '../../components/buttons/CopyButton';
import { Form, ButtonToolbar, Button, RadioTile, RadioTileGroup } from 'rsuite';
import { Icon } from '@rsuite/icons';
import PlusIcon from '@rsuite/icons/Plus';
import TrendIcon from '@rsuite/icons/Trend';
import DragableIcon from '@rsuite/icons/Dragable';
import GoalTree from "./GoalTree";

function buildCopyUrl(goalId, endpoint){
    return `localhost:3000/${goalId}/${endpoint}`;
}

function ControlBoardPage() {

    const { ancestorId, goalId } = useParams();

    const [phaseIndex, setPhaseIndex] = useState(0);

    const [goals, setGoals] = useState([]);
    const [selectionIndex, setSelectionIndex] = useState(-1);

    const navigate = useNavigate();

    useEffect(() => {
        const fetchData = async() => {
            const { data } = await axios.get('http://localhost:3001/ControlBoardPage/getPageData', { params: { "goalId": goalId } });
            setGoals(data);
        }
        fetchData();


    }, []);

    return (
        <>
            <h3>Control Board</h3>
            <Form layout="horizontal">
                <Form.Group>
                    <GoalTree rawGoals={goals}/>
                </Form.Group>
            </Form>
        </>
    )
}

export default ControlBoardPage;

GoalTree Component:

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

function GoalTree(props){
    const { rawGoals } = props;

    let refinedGoals = [...rawGoals];
    refinedGoals.forEach((row) => {
        row['children'] = [];
        row['value'] = row.id;
        row['label'] = row.goal;
    })

    while(refinedGoals.length > 1){
        const childGoal = refinedGoals.pop();

        for(let i = 0; i < refinedGoals.length; i++){
            const isChild = refinedGoals[i].children_ids.includes(childGoal.id);
            if(isChild){
                refinedGoals[i].children.push(childGoal);
                break;
            }
        }
    }

    return (
        <Tree data={refinedGoals} defaultExpandAll={true}/>
    )
}

export default GoalTree;

I've tried running through it with the debugger, where nothing looked incorrect.

I've asked on r/learnprogramming, discord servers, and even paid for ChatGPT4 to see if the advanced model could find a solution. No dice, all solutions provided have resulted in the same issue that is currently being presented. Would love to find out what I'm doing wrong here.

Using RSuite's Tree, Data Is Rendering & Populating But Not Expanding On Default

0 Answers0