I need to declare a useState, but I do not clealy understand TypeScript. What should I write in place of XXXXXX. I have a strict JSON with string > string > number structure and I will populate selectedLayoutItemIds from it. Top level id is called eventTimeId, 2nd level I would call layoutItemId, 3rd level count. Would you help a bit?
const [selectedLayoutItemIds, setSelectedLayoutItemIds] = useState<
{ [eventTimeId: string]: XXXXXX } | undefined
>();
You only have to describe the structure of the data as you would do in a regular json and the 1st & 2nd level keys will be treated as strings:
interface LayoutItemIds {
eventTimeId: {
layoutItemId: {
count: number;
}
}
}
const [selectedLayoutItemIds, setSelectedLayoutItemIds] = useState<LayoutItemIds | undefined>();
Here is a playground to see it in action.
Finally I declared a new interface:
export type LayoutItemIdsWithAvailability = {
[layoutItemId: string]: number;
};
and used here:
const [selectedLayoutItemIds, setSelectedLayoutItemIds] = useState<
{ [eventTimeId: string]: LayoutItemIdsWithAvailability } | undefined
>();