# Building like component - onClick function giving error

**URL:** <https://forum.codewithmosh.com/t/building-like-component-onclick-function-giving-error/24020>\
**Category:** Uncategorized\
**Created:** [December 7, 2023, 8:41am UTC](https://forum.codewithmosh.com/t/building-like-component-onclick-function-giving-error/24020 "2023-12-07T08:41:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![binzz](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@binzz](https://forum.codewithmosh.com/u/binzz)\
**Post date:** [December 7, 2023, 8:41am UTC](https://forum.codewithmosh.com/t/building-like-component-onclick-function-giving-error/24020/1 "2023-12-07T08:41:17Z")

</div>

onClick function is giving below error  
Type ‘{ color: string; size: number; onClick: () =\> void; }’ is not assignable to type ‘IntrinsicAttributes & IconBaseProps’.  
Property ‘onClick’ does not exist on type ‘IntrinsicAttributes & IconBaseProps’.ts(2322)  
(property) onClick: () =\> void

```auto

import { useState } from "react";
import { AiFillHeart } from "react-icons/ai";
import { AiOutlineHeart } from "react-icons/ai";

const Like = () => {
  const [status, setStatus] = useState(true);

  if (status)
    return (
      <AiFillHeart color="#ff6b81" size={60} onClick={() => setStatus(false)} />
    );
  return <AiOutlineHeart size={60} onClick={() => setStatus(true)} />;
};

export default Like;

```

---

<div class="post-metadata">

**Author:** ![BenjyTec](https://avatars.discourse-cdn.com/v4/letter/b/dec6dc/32.png) [@BenjyTec](https://forum.codewithmosh.com/u/BenjyTec)\
**Post date:** [March 12, 2024, 10:22am UTC](https://forum.codewithmosh.com/t/building-like-component-onclick-function-giving-error/24020/2 "2024-03-12T10:22:24Z")

</div>

Have a look at [this thread](https://forum.codewithmosh.com/t/whenever-i-pass-onclick-on-a-react-icon-component-i-get-a-typescript-error/19766/9), it describes the same problem.

According to the [official github of react icons](https://github.com/react-icons/react-icons/issues/445), you should instead use the onClick property of the parent. You can for example wrap it into a button:

```auto
 return (
    <button className={styles.containerButton} onClick={handleClick}>
      {liked && <AiFillHeart color="#ff6b81" size="20" />}
      {!liked && <AiOutlineHeart color="#ff6b81" size="20" />}
    </button>
  );

```

And it the CSS, do:

```auto
.containerButton {
    border: none;
    background-color: transparent;
}

```