Jak przekazać talicę obiektów do komponentu?

hej
Jestem nowy w typescript i mam taki banalny blad.

(property) data: menuItems[]
Type '{ data: menuItems[]; }' is not assignable to type 'IntrinsicAttributes & menuItems[]'.
  Property 'data' does not exist on type 'IntrinsicAttributes & menuItems[]'.ts(2322)

Tutaj jest kod:
https://codesandbox.io/s/data-is-not-a-function-ju21g6?file=/src/Settings.tsx

A tutaj jest chyba powiązany z tym bledem kolejny
https://codesandbox.io/s/data-is-not-a-function-ju21g6?file=/src/TreeSettings.tsx:256-320

interface menuItems {
  name: string;
  level: number;
  id: number;
  pid: number;
  children?: any[];
}

const Settings = () => {
  const { flattenarr, zerotreetoarr } = useConvertTree();
  const [data, setData] = useState<menuItems[]>([]);
  useEffect(() => {
    zerotreetoarr(tree.children as [], [0]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    setData(flattenarr);
  }, []);
  return <TreeSettings data={data} />;
};

 interface menuItems {
  name: string;
  level: number;
  id: number;
  pid: number;
  children?: any[];
}
 interface treeItems {
  name: string;
  children: treeItems[];
}

const TreeSettings = (data: menuItems[]) => {
  return (
    <>
      {data.map((t) => {
        return <div>{t.name}</div>;
      })}
    </>
  );
};

artur2015 napisał(a):

const TreeSettings = (data: menuItems[]) => {

Jeśli przekazujemy dane do komponentu to tam wszystkie wartości są widoczne w formie obiektu

const TreeSettings = (props) => {
  console.dir(props); // <-- dodatkowy obiekt, o który mi chodzi
  console.dir(props.data); // <-- nasza wartość, która też może być obiektem
  console.dir(props.data.foo); // <-- i finalnie jakaś przykładowa właściwość
  
  // ...
}

<TreeSettings data={data} />

Możemy skorzystać tutaj z destrukturyzacji, żeby pominąć jeden obiekt

const TreeSettings = ({ data }) => {
  console.dir(data);
  console.dir(data.foo);
  
  // ...
}

I tutaj przechodzimy już do sedna, czyli połączenia tego z TypeScript :D

Możemy wykorzystać typ VC, który udostępnia nam React

import type { VC } from 'react';

interface MenuItems {
  // ...
}

interface TreeSettingsProps {
  data: MenuItems[];
}

const TreeSettings: VC<TreeSettingsProps> = ({ data }) => {
  // ...
}