React TypeScript Tutorial - 6 - Event Props

📱 Follow Codevolution

Event Props with React and TypeScript

[endthefed]

You mentioned that the event type doesn't need to be memorized and can be copy/pasted - this is true, but you didn't mention a handy way to do this without leaving the editor - assuming you have typescript extension. You just mouseover the 'event' parameter in the onClick attribute's arrow function in the button element. It will display the event's type and you can copy it.

// mouse over 'event' below and VS Code will show you the spec for event, including its type:
// (parameter) event: React.MouseEvent<HTMLButtonElement, MouseEvent>
export const Blah = () => {
return <button onClick={event => {}} />
}

[fabianpetersen]

Great video to learn the basics to cement your knowledge. My issue is I sometimes struggle more with errors of typescript then my actual code 😂. Its also fun when you have to use types from packages and you dont know what type it should be 😅

[xogecz]

You explain everything very easy way
Thanks, sir

[babsake]

Hi @Codevolution There's a bit of confusion as to why you passed a variable id to the handleClick in the App component. Where is id coming from? And why are we hard coding it as 1 in the component. It's a bit confusing for me. Does anyone else get confused here? does any one understand what's going on?

[maksymradchenko]

Hello from Ukraine ! :)
Thank you so much!!!

[papa_ethan]

@4:08 I do not know if it is essential to pass the id there. Usually only the event is the parameter in that case.

[evaristusjean]

3:28 - 3:33 got me just know where to find it and copy paste it 😇🙃

[sdfsdfsdffdsfsdfsd]

finally I found why I have err in my typescript. thank you

[jhormanorozco]

Please do a React + DDD tutorial (clean architecture), greetings from Medellín, Colombia.

[jcsantos]

Why did you create another handleInputChange in Input element when the props.handleChange contains the function coming from the parent element?

[aqsamustafa]

at 4:06
Why doesn't typescript show an error while defining the function for handleClick props?
According to the type, handleClick function needs to have an event and an id. However, at time 4:06 no id is yet passed but no error is shown

[liotechtutorials]

Why did we add an id on the handleClick function? What is the purpose?

[asselgabdullina]

Good job was done!!! However, is it possible to record real results from the screen while using that code

[urieldahan]

hey. on 06:47, you dont need to set the return type of the handleInputChange function to void?

Thank you, my friend, you help me a lot!

[frankenstein]

sir i completed the playlist please upload more about react typescript

[sourabhgera]

Dear Sir,

Request you to please provide some video on react-native (mobile app demo) using type script

[MauriceTheMagnificent]

Thanks a lot for you lessons. I really enjoyed the previous lessons but tbh, I'm not enjoying these lessons on Typescript and I'd love to ask whether it's compulsory to learn Typescript with React?

[Lone_Khan]

getting this error in both input and button
"'Button' cannot be used as a JSX component.
Its return type 'void' is not a valid JSX element."

[SS-xtul]

where can we get your files of code to download?