Generics

Author: gopinav

react-typescript-demo/src/App.tsx

@@ -15,6 +15,7 @@ import { DomRef } from './components/refs/DomRef'
 import { MutableRef } from './components/refs/MutableRef'
 import './App.css'
 import { Counter } from './components/class/Counter'
+import { List } from './components/generics/List'
 
 function App() {
   const personName = {
@@ -63,6 +64,28 @@ function App() {
       <DomRef />
       <MutableRef />
       <Counter message='The count value is ' />
+      <List
+        items={['Batman', 'Superman', 'Wonder Woman']}
+        onClick={item => console.log(item)}
+      />
+      <List items={[1, 2, 3]} onClick={item => console.log(item)} />
+      <List
+        items={[
+          {
+            first: 'Bruce',
+            last: 'Wayne'
+          },
+          {
+            first: 'Clark',
+            last: 'Kent'
+          },
+          {
+            first: 'Princess',
+            last: 'Diana'
+          }
+        ]}
+        onClick={item => console.log(item)}
+      />
     </div>
   )
 }

react-typescript-demo/src/components/generics/List.tsx

@@ -0,0 +1,22 @@
+type ListProps<T> = {
+  items: T[]
+  onClick: (value: T) => void
+}
+
+export const List = <T extends { id: number }>({
+  items,
+  onClick
+}: ListProps<T>) => {
+  return (
+    <div>
+      <h2>List of items</h2>
+      {items.map((item, index) => {
+        return (
+          <div key={item.id} onClick={() => onClick(item)}>
+            {item}
+          </div>
+        )
+      })}
+    </div>
+  )
+}