When attempting to utilize the onClick event for a button in React, my goal is to simply have it log "clicked" in the console. However, this functionality is not working as expected.
The Component where the onClick event is being called looks like this:
import React from 'react'
import 'tachyons'
const ImageLinkForm=({OnInputChange,OnButtomSubmit}) =>{
return (
<div>
<div className="center mt5 form br3 shadow-5 w-50">
<input className="f3 pa2 w-70 center" type="Text" onChange={OnInputChange}></input>
<button className="w-30 f4 grow link ph3 pv2 dib white bg-black pointer ma1" onClick={OnButtomSubmit}>Detect</button>
</div>
</div>
)
}
export default ImageLinkForm
The component is utilized in App.js like so :
<ImageLinkForm OnInputChange={this.OnInputChange} OnButtonSubmit={this.OnButtonSubmit} ></ImageLinkForm>
The definitions of the functions are:
OnInputChange=(event)=>{
console.log(event.target.value);
}
OnButtonSubmit=()=>{
console.log('clicked');
}
I'm unable to identify the issue here. PS: the onInputChange function is functioning correctly