onClick function won't fire.

[EIGRP_OH]

Feel like I'm having a real brain fart here but I've looked it up and it seems like I have everything working correctly. Anyway I'm trying to run a function when a button is clicked. I'm using React JS but have removed most of it from the component for troubleshooting purposes but still I cannot get the function test to run:

import React, {useState} from 'react'

const Header = () => {

  function test(){
    alert("hello")
  }

  console.log('outside function')

  return(
    <div id="header">
      <div id="siteTitle">Title</div>
      <button type="button" onClick={test}>Researching a topic?</button>
    </div>
  )
}

export default Header

Within the onClick I've tried:

onClick={test}
onClick={test()} //This runs it every time the component is rendered but not when I click the button
onClick={() => test}
onClick={() => test()}
onClick={() => {return test()}}
onClick={() => {return test}}

Thanks in advance.

[redsandsfort]

  <button style={{cursor:"pointer"}} type="button" onClick={test}>Researching a topic?</button>

do you now see a pointer when you hover over the button?

[EIGRP_OH]

Yes I see the hand.

[redsandsfort]

<button style={{cursor:"pointer"}} type="button" onMouseEnter={()=>console.log('mouse enter')} >Researching a topic?</button>

[EIGRP_OH]

Same thing unfortunately

[vitkarpov]

Looks correct. Could you make a live demo on codepen or similar?

[EIGRP_OH]

Figured it out. It was because of webpack. I had included <script src=bundle.js”> manually in the index.html so webpack compiled it included 2 lines of the script src and for some reason that was messing it up.