Currently, I am utilizing a treeview library in React that requires an array of NodeModule[] as input. The array I am passing to the tree component is being used in another component with different key names. To align the data structure with NodeModule[], I made some changes (refer to "thirdTreeData"), but encountered an error:
Error Message: 'Argument of type' '{ id: number; parent: number | null; text: string; }[] | undefined' is not assignable to parameter of type 'NodeModel[] | (() => NodeModel[])'.
This is how NodeModule[] is structured:
export declare type NodeModel<T = unknown> = {
id: number | string;
parent: number | string;
text: string;
};
To match the key names with NodeModule[], I modified the data like this (renamed parent_id to parent and name to text):
const thirdTreeData = secondTreeData?.map(tree => {
return { id: tree.id, parent: tree.parent_id, text: tree.name };
});
Upon hovering over thirdTreeData, I see this:
const thirdTreeData: {
id: number;
parent: number | null;
text: string;
}[] | undefined
(*secondTreeData's type is - const secondTreeData: ITree[] | undefined )
How can I convert its type to NodeModule[] so that I can successfully pass thirdTreeData into the tree component like this?
const [treeData, setTreeData] = useState<NodeModel[]>(thirdTreeData);
The above setup gives me an error message. I have already attempted specifying : NodeModule[] in front of thirdTreeData without success :(
const thirdTreeData :NodeModule[] = secondTreeData?.map(tree =>
I am relatively new to TypeScript, so any help is greatly appreciated!