Fabric DetailsList change child row controls based on parent row

Question

I've a details list as shown below.

<DetailsList
                        selectionPreservedOnEmptyClick={false}
                        items={projectData}
                        columns={getGridColumns()}
                        setKey="set"
                        layoutMode={DetailsListLayoutMode.justified}
                        isHeaderVisible={true}
                        selectionMode={SelectionMode.single}                       
                    >
                    </DetailsList>

My question is about a column Executed which renders a Toggle as shown below.

{
                key: "executed",
                maxWidth: 80,
                minWidth: 10,
                name: "Executed YES/NO?",
                isResizable: true,
                isCollapsible: true,
                data: 'string',
                onRender: (item: IProjectTask) => {
                    return <Toggle onText="On", OffText="Off" />
                }
            }

Upon rendering it displays as shown below. This DetailsList is bound to an array, as you can see project 0 is the parent of project1 and project2

My questions is : When I change the Executed toggle button on a parent row, the child rows Executed should automatically be checked and disabled. in short I want to control child rows toggle button behavior from parent row toggle button. please help.

Answer 1

After I understood the state mechanism in detail, the problem got solved.