React: Expected `onClick` listener to be a function, instead got a value of `object` type but only when I pass it to a child component

Question

I have a basic increment app in react with the following code. Passing in the handleClick function into the first button works fine, however passing it to a child component IcrementButton that returns the exact same button gives the error: React: Expected `onClick` listener to be a function, instead got a value of `object. Why is it working for the first button but not the child component button and how can it be fixed? thanks in advance.

import { useState } from "react";
import "./styles.css";

const IncrementButton = (handleClick) => {
  return (
    <button onClick={handleClick}>+</button>
  )
}

export default function App() {
  const [num, setNum] = useState(0)
  const handleClick = (e) => {
    e.preventDefault()
    console.log('clicked')
    setNum(prev => prev += 1)
  }
  return (
    <div className="App">
      <div>{num}</div>
      <button onClick={handleClick}>+</button>
      <IncrementButton handleClick={handleClick} />
    </div>
  );
}

Typo, you neglected to destructure the handleClick callback from the props object. Voted to close as "Not reproducible or was caused by a typo". Cheers. — Drew Reese
– Drew Reese, Commented Feb 25, 2022 at 8:04

Aaditey Nair · Accepted Answer · 2022-02-25 08:01:54Z

7

Since the IncrementButton is a custom component all props passed to it is sent as an object and to access it you need to use props.property. There are 2 ways to get your code to work.

Use props.property

const IncrementButton = (props) => {
  return (
    <button onClick={props.handleClick}>+</button>
  )
}

Destructure the props object

const IncrementButton = ({handleClick}) => {
  return (
    <button onClick={handleClick}>+</button>
  )
}

answered Feb 25, 2022 at 8:01

Aaditey Nair

3632 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nekan123 · Accepted Answer · 2022-02-25 07:59:58Z

2

You didn't destructure handle click. Try the code below

const IncrementButton = ({handleClick}) => {
  return (
    <button onClick={handleClick}>+</button>
  )
}

answered Feb 25, 2022 at 7:59

Nekan123

723 bronze badges

Comments

Neyaz Ahmad · Accepted Answer · 2022-02-25 08:05:07Z

2

That does not work because React passes every props on a Component as a single Object.

You have two ways to get handleClick function reference.

Destructure props (es6)

const IncrementButton = ({handleClick}) => {
  return (
    <button onClick={handleClick}>+</button>
  )
}

Use props.propertyName

const IncrementButton = (props) => {
  return (
    <button onClick={props.handleClick}>+</button>
  )
}

answered Feb 25, 2022 at 8:05

Neyaz Ahmad

1743 bronze badges

Collectives™ on Stack Overflow

React: Expected `onClick` listener to be a function, instead got a value of `object` type but only when I pass it to a child component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related