Reactjs: Expected Onclick Listener to Be a Function, Instead Got Type String

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

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.

1. Use props.property

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

2. Destructure the props object

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

Error: Expected `onClick` listener to be a function, instead got a value of `object` type

You neet to extract the props that you component recive

Try this :

import React from "react";

const ProfileSave = ({open, handleClose, handleModal}) => {
  return open ? (
    <div className="fixed inset-0 z-10 overflow-y-auto">
      <div
        className="fixed inset-0 w-full h-full bg-black opacity-40"
        onClick={handleClose}
      ></div>
    </div>
  ) : (
    ""
  );
};

export default ProfileSave;

Warning: Expected `onClick` listener to be a function, instead got a value of `boolean` type

You are overriding the definition of toggle with this code :
const [toggle] = useAudio(url);. The Player.js has multiple declarations and definitions of toggle. See:

 const toggle = () => {
      setPlaying(!playing);
      playing ? audio.play() : audio.pause()
      console.log("audio is playing" + toggle);
     };
  
    return [playing, toggle];
  };

..
...
..
const [toggle] = useAudio(url);

Hence the Error Expected OnClick to be a function but provided a boolean

---

Related Topics