CODEWITHSUNDEEP
typescriptreactjs
micahblu
micahblu

Reputation: 5212

How to use onclick on html attributes inside JSX with Typescript

Typesript is giving the following error when attempting to use onclick on any HTML element I use.

ERROR in /Volumes/WorkSpace/Projects/wirecash-client/src/elements/dropdown/Dropdown.tsx
(25,45): error TS2339: Property 'onclick' does not exist on type 'HTMLProps<HTMLButtonElement>'.

My component:

import React from 'react'
import { ClientTypes } from 'types'

interface Props {
  items: Array<ClientTypes.DropdownItem>
  onClick(item:ClientTypes.DropdownItem): () => void
}

const Dropdown = ({onClick, items}) => {
  let selectedItem = null;
  for(let i=0, j=items.length; i<j; i++) {
    if(items[i].selected) {
      selectedItem = items[i];
      break;
    }
  }
  return (
    <div className="dropdown show">
      <a className="btn btn-secondary dropdown-toggle" aria-haspopup="true" aria-expanded="false">
        {selectedItem.name}
      </a>

      <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
        {items.map((item) => (
          <button className="dropdown-item" onclick={onClick(item)}>
            Action
          </button>
        ))}
      </div>
    </div>
  )
}

export default Dropdown

Upvotes: 2

Views: 1699

Answers (1)

micahblu
micahblu

Reputation: 5212

The onclick attribute must be camel cased onClick

This works!

<button className="dropdown-item" onClick={() => onClick(item)}>
  Action
</button>

Upvotes: 2

Related Questions