Solution

src/App.tsx

@@ -1,11 +1,58 @@
 import React from 'react';
+import { PeopleTable } from './components/PeopleTable';
+import peopleFromServer from './api/people.json';
 
 import './App.scss';
 
-const App = () => (
-  <div className="App">
-    <h1>People table</h1>
-  </div>
-);
+type State = {
+  query: string;
+  people: Person[];
+};
+
+class App extends React.Component<{}, State> {
+  state: State = {
+    query: '',
+    people: [...peopleFromServer as Person[]],
+  };
+
+  getVisiblePeople = () => {
+    const { query, people } = this.state;
+
+    let visiblePeople = people;
+
+    if (query) {
+      const lowerQuery = query.toLowerCase();
+
+      visiblePeople = people
+        .filter(person => person.name.toLowerCase().includes(lowerQuery));
+    }
+
+    return visiblePeople;
+  };
+
+  render() {
+    const { query } = this.state;
+
+    const visiblePeople = this.getVisiblePeople();
+
+    return (
+      <div className="App">
+        <h1>{`People table ${query}`}</h1>
+
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => {
+            this.setState({ query: e.target.value });
+          }}
+        />
+
+        {visiblePeople.length !== 0 && (
+          <PeopleTable people={visiblePeople} />
+        )}
+      </div>
+    );
+  }
+}
 
 export default App;

src/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 
 import App from './App';

src/react-app-env.d.ts

@@ -1,2 +1,12 @@
 // eslint-disable-next-line
-/// <reference types="react-scripts" />
+/// <reference types='react-scripts' />
+
+interface Person {
+  'name': string;
+  'sex': string;
+  'born': number;
+  'died': number;
+  'fatherName': string;
+  'motherName': string;
+  'slug': string;
+}

tsconfig.json

@@ -1,32 +1,32 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react",
-    "sourceMap": true,
-    "declaration": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "experimentalDecorators": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": [
-    "src"
-  ]
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "sourceMap": true,
+    "declaration": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "experimentalDecorators": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ]
+}