how to manage the state of recursive component in react? how to set them on change of input? how to setstate on lower state of recursion? how to keep record of the hierarchy.
I am trying to loop trough object to create the form and then if input change we need to change the value in object.
I am trying to loop trough object to create the form and then if input change we need to change the value in object.
return (
<>
{Object.entries(value).map(([key, value]: any) => {
if (typeof value == "object" && value != null) {
return (
<div className="my-5" key={key}>
<Collapse key={key}>
<Panel header={key} key={key}>
<RecursiveForm datakey={key} value={value} />
</Panel>
</Collapse>
</div>
);
} else {
if (key == "defaultForecastFrequency") {
return (
<div className="flex gap-2" key={key}>
<span>{key}:</span>
<Select defaultValue="M" style={{ width: 120 }}>
<Option value="M">M</Option>
<Option value="W">W</Option>
<Option value="P">P</Option>
</Select>
</div>
);
} else if (
typeof value == "string" ||
value == null ||
typeof value == "number"
) {
return (
<Form.Item
label={key}
name={key}
key={key}
initialValue={value}
required={true}
>
<Input />
</Form.Item>
);
} else if (typeof value == "boolean") {
return (
<div className="py-5 flex gap-2" key={key}>
<span>{key}:</span>
<Switch checked={value} />
</div>
);
} else if (Array.isArray(value)) {
return renderArray(value, key);
}
}
})}
</>
);
};
Object
uiSpecificConfig: {
componentQueryMap: {
getForecastChart: {
forecastTrendChart: "ForecastTrendChart",
},
attributeLevelForecastMetrics: {
focusListTableContainer: "FocusListTableContainer",
},
forecastMetricsChart: {
forecastTrendTab: "ForecastTrendTab",
},
getActualsData: {
forecastTrendTabActuals: "ForecastTrendTabActuals",
},
getFeatures: {
forecastTrendTabFeatures: "ForecastTrendTabFeatures",
},
getSamyaForecastBreakdown: {
breakdownByAttributeTab: "BreakdownByAttributeTab",
},
getBreakdownMetricsConfig: {
breakdownMetricConfig: "BreakdownMetricConfig",
},
},
},```