React TypeScript Tutorial - 19 - Generic Props

📱 Follow Codevolution

Generic Props with React TypeScript
React TypeScript Tutorial on Generic Props

[flnnx]

The whole React-Typescript series are really well structured and well explained. Thanks!

[pasokoner]

Mentioning generic like a parameter of a function really helps a lot understanding it. Thank you

[xdukatelax]

Instead {item} which gives an error : (Objects are not valid as a React child).
Use {JSON.stringify(item)}

[keifer]

This was pretty confusing to follow once <T> was splattered everywhere I'll be honest

[Jocatins]

Greetings Vishwas. I got this error when following this Generic tutorial

TS2322: Type 'T' is not assignable to type 'ReactNode'
Type '{}' is not assignable to type 'ReactNode'.
Type 'T' is not assignable to type 'ReactPortal'.
Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props

17 | <div key={index} onClick={() => onClick(item)}>
> 18 | {item}
|

[conaxlearn]

At 6:30, I have an error for {item} on line 12.

Type 'T' is not assignable to type 'ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Type 'T' is not assignable to type 'ReactPortal'.
Type '{}' is missing the following properties from type 'ReactPortal': children, type, props, key
10 | return (
11 | <div key={index} onClick={() => onClick(item)}>
> 12 | {item}
|
13 | </div>
14 | )
15 | })}

[KevalJesani]

Typescript is happy then we all are happy ☺️.
You have to find out how Typescript is happy 😅

[alwyschwuetz]

Hey Vishwas, I'm hoping for an update on this course as there is an error starting from 5:54

ERROR in src/generics/List.tsx:12:20
TS2322: Type 'T' is not assignable to type 'ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Type 'T' is not assignable to type 'ReactPortal'.
Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props
10 | return (
11 | <div key={index} onClick={() => onClick(item)}>
> 12 | {item}
|
13 |
14 | </div>
15 | )

[somah]

thank you really for such wonderful tutorial

[akash_gupta_]

I think this is the best solution

type ListProps<T> = {
items: (string | number | { first: string; last: string;id:number })[];
onClick: (value: string | number | { first: string; last: string }) => void;

}

[blckclovr]

for those who got error
npm: npm install --save @types/uuid

import { v4 as uuidv4 } from 'uuid';
type ListProps<T> = {
items?: T[]
onClick: (value: T) => void
}

type PersonType = {
first: string,
last: string
}

export const List = <T extends PersonType>({items, onClick}: ListProps<T>) =>{
return (
<>
<div>
<h2>List of Items</h2>
{items?.map((item, index)=>(
<button key={uuidv4()} onClick={()=>onClick(item)} style={{margin: '4px 0px', padding: '10px'}}>
{item.first}
</button>
))}
</div>
</>
)
}

[hooooman.]

despite following the same code, why I am getting that red swiggly line under the "{item}" in the List.tsx ?

[bibhassingh]

I added {JSON.stringify(item)} to resolve type issue

[mkinbhhbfhbvg]

Hi, where is the difference between extending from <T> and any, in both cases item can be anything?

[stagelarsen]

@codevolution tx for the video, but it's missing how to print out Objects. When you use the {JSON.stringify(item)} function, its print {"name":"batman"} in the browser. How du you send a print function ( like : {() => {<div>{item.name}</div> }) to the List komponents.

[ArvindSingh-wjvy]

But here you commented out list of string | number and accessing "id" from list of array of objects. Now how it is generic for string | number. It is not working when passing list of numbers and list of array of objects.

[sahibzadahamza]

error shown on 6:13
<div key={index} onClick = {()=>onClick(items)}>
> 14 | {items}
|
15 | </div>

[ghosh]

I'm getting this error in List.tsx: Type 'T' is not assignable to type 'ReactNode'. after using <T extends {}> Can anyone please check and let me know where it went wrong?

[ksusha]

I had an error: "Objects are not valid as a React child (found: object with keys {id, first, last}). If you meant to render a collection of children, use an array instead.
"
I solved a problem with Object.values
The full code:
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) => {
let value = Object.values(item)
return (
<div key={item.id} onClick={() => onClick(item)}>
{value[1]} {value[2]}

</div>
)
})}
</div>
)
}

[chubbyBunny]

I couldn't agree more... Princess Diana was a heroine