Passing a function as a prop to a functional component

The first parameter logThis will be props object itself.You need to destructure the logThis object.

const ChildComp = ({ logThis }) => (
  <button onClick={() => logThis('test string')}>Click Here</button>
)

Or you can access it from props

const ChildComp = (props) => (
  <button onClick={() => props.logThis('test string')}>Click Here</button>
)

destructure logThis from props

const ChildComp = ({logThis}) => (
  <button onClick={()=>logThis('test string')}>Click Here</button>
)

export default ChildComp

Related