1

I have this object that I need to send to a component.

{
    key: "1",
    label: "Folder 7",
    icon: "fa fa-folder",
    title: "Desktop Folder",
    children: [
      {
        key: "1-0",
        label: "Folder 8",
        icon: "fa fa-folder",
        title: "Documents Folder",
      },
      {
        key: "1-1",
        label: "Folder 9",
        icon: "fa fa-folder",
        title: "Documents Folder",
      },
    ],
  }

I wrote this interface for it :

interface Node {
    node: {
        key: string
        label: string
        icon: string
        title: string
        children: Array<Node>
    }
}

but this gives an error

Type '{}' is missing the following properties from type '{ key: string; label: string; icon: string; title: string; children: Node[]; }': key, label, icon, title, children

The component where I'm passing the prop from :

interface TreeProps{
    data: Array<object>
}

const Tree: FC<TreeProps> = ({data=[]}) => {
    return (
        <div>
             <div className="d-tree">
                 <ul className="d-flex d-tree-container flex-column">
                     {data.map(tree => (
                         <TreeNode node={tree}/>
                     ))}
                 </ul>
             </div>
        </div>
    )
}

The component where I'm taking in the prop:

type Node  = {
    node: {
        key: string
        label: string
        icon: string
        title: string
        children: Node[]
    }
}

const TreeNode: FC<Node> = ({node}) => {

    const [childVisiblity, setChildVisibility] = useState(false);

    const hasChild = node.children ? true : false;

    return (
        <li className="d-tree-node border-0">
            <div className="d-flex" onClick={e => setChildVisibility(!childVisiblity)}>
                {hasChild && (
                <div className={`d-inline d-tree-toggler ${childVisiblity ? "active" : "" }`}>
                    <FontAwesomeIcon icon={faCaretRight}/>
                </div>
                )}

                <div className="col d-tree-head">
                    <i className={`mr-1 ${node.icon}`}></i>
                    {node.label}
                </div>
            </div>
            

            {
                hasChild && childVisiblity && <div className="d-tree-content">
                    <ul className="d-flex d-tree-container flex-column">
                        <Tree data={node.children}/>
                    </ul>
                </div>
            }
        </li>
    )
}

Do I need to tell the component that the array has objects? How do I fix this?

user16516348
  • 117
  • 8
  • Why do you have a `node` property inside the `Node` interface but your data does not have a `node` property? – Akash Jul 26 '21 at 11:16
  • ``` const TreeNode: FC = ({node}) => { } ``` Needed it below like this also each child is also of the type node but how to I assign the type of those props as an object without using a variable? – user16516348 Jul 26 '21 at 11:21

1 Answers1

1

Change the name of the interface to for example INode (I- interface)

Also, add ? to the children property in the interface to fix recursion.

interface INode {
      key: string
      label: string
      icon: string
      title: string
      children?: INode[]
}


const data: INode = {
  key: "1",
  label: "Folder 7",
  icon: "fa fa-folder",
  title: "Desktop Folder",
  children: [
    {
      key: "1-0",
      label: "Folder 8",
      icon: "fa fa-folder",
      title: "Documents Folder",
    },
    {
      key: "1-1",
      label: "Folder 9",
      icon: "fa fa-folder",
      title: "Documents Folder",
    },
  ],
}

Demo: https://codesandbox.io/s/focused-poincare-0lf6c

The problem is with Node name, because the name is reserved in TS.

Kordrad
  • 1,154
  • 7
  • 18