Practicing Typescript: Event props

Event props

// App.tsx
import { Button } from './components/Button'
import { Input } from './components/Input'

function App() {

	return (
    	<div className='App'>
        	<Button handleClick={(event, id) => {
          		console.log('Button clicked', event, id)
        		}}
            />
        	<Input value='' handleChange={event => console.log(event)} />
        </div>
    )
}

Mouse event

// Button.tsx
type ButtonProps = {
  handleClick: (event: React.MouseEvent<HTMLButtonElement>, id: number) => void
}

export const Button = (props: ButtonProps) => {
  return <button onClick={event => props.handleClick(event, 1)}>Click</button>
}

Change event

// Input.tsx
type InputProps = {
  value: string
  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
}

export const Input = ({ value, handleChange }: InputProps) => {
  // const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  //   console.log(event)
  // }
  return <input type='text' value={value} onChange={handleChange} />
}