diff --git a/src/App.tsx b/src/App.tsx index 729e14b..aa594f1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,20 +3,16 @@ import logo from './logo.svg'; import './App.css'; import List from './components/List'; import AddToList from './components/AddToList'; +import {IPerson} from "./models/IPerson"; -export interface IState { - people: { - name: string - age: number - img: string - note?: string - }[] +interface IState { + people: IPerson[] } function App() { - const [people, setPeople] = useState([ + const [people, setPeople] = useState([ { name: "LeBron James", age: 35, diff --git a/src/components/AddToList.tsx b/src/components/AddToList.tsx index e1e2a3e..5b500bf 100644 --- a/src/components/AddToList.tsx +++ b/src/components/AddToList.tsx @@ -1,9 +1,10 @@ import React, { useState } from 'react' -import { IState as Props } from "../App"; +import {IPerson} from "../models/IPerson"; + interface IProps { - setPeople: React.Dispatch> - people: Props["people"] + setPeople: React.Dispatch> + people: IPerson[] } const AddToList: React.FC = ({setPeople, people}) => { @@ -32,7 +33,7 @@ const AddToList: React.FC = ({setPeople, people}) => { age: parseInt(input.age), img: input.img, note: input.note - } + } as IPerson ]); setInput({ diff --git a/src/components/List.tsx b/src/components/List.tsx index 53bd6ed..ddafd7c 100644 --- a/src/components/List.tsx +++ b/src/components/List.tsx @@ -1,8 +1,8 @@ import React from 'react' -import { IState as Props } from "../App"; +import {IPerson} from "../models/IPerson"; interface IProps { - people: Props["people"] + people: IPerson[] } const List: React.FC = ({ people }) => { diff --git a/src/models/IPerson.ts b/src/models/IPerson.ts new file mode 100644 index 0000000..40ff373 --- /dev/null +++ b/src/models/IPerson.ts @@ -0,0 +1,6 @@ +export interface IPerson { + name: string; + age: number; + img: string; + note?: string; +}