onclick event for Imported component in react?

Question

I have imported a component from a different file and I want to reset my timer if I click on the imported component's elements. Is there a way to tackle this issue or should I write both components in single jsx ?

import {SampleComponent} from "../SampleComponent";
<div>
   <SampleComponent  onClick = {?????????}/>
 </div>

Answer 1

What you can do here is,

import {SampleComponent} from "../SampleComponent";

<div onClick={??????}>
   <SampleComponent/>
</div>

Or you can pass the function from your parent component and add click event on top node of the child component.

<div>
   <SampleComponent onHandleClick={() => ??????}/>
</div>

Answer 2

If you want to call a function in parent component, whenever an event (such as in your case an onClick event) occurs in a child component, you will need to pass the parent function as a props. Here's what it will look like:

class ParentComponent extends React.Component {
 handleClick = () => { ... }

 render {
  return (
   <SampleComponent onClick={this.handleClick} />
  )
 }
}

And here is how your SampleComponent will be:

class SampleComponent extends React.Component {

 render {
  return (
   <div onClick={this.props.onClick}> //to call the function on whole component
    <button onClick={this.props.onClick}>Click Me</button> //to call the function on a specific element
   </div>
  )
 }
}

What I have understand so far from your question is that you want to call a function in SampleComponent whenever a click event occurs on it (on SampleComponent).

To do this, here is how your SampleComponent will look like :

class SampleComponent extends React.Component {
.
.
render() {
 handleClick = () => { ... }

 return (
  <div onClick={this.handleClick}>
    ...
  </div>
 )
}

Note: For this you don't need to add onClick in parent.

Answer 3

resetTimerHandler = (timer)=>{
    timer = 0; or this.setState({timer: 0}) // how ever you are defining timer
}
render(){
    let displayTimer;
    this.updateTimer(displayTimer)// However you are updating timer
    return(
        <SampleComponent onClick={this.resetTimerHandler.bind(this,displayTimer)} />)

Without knowing how you are updating your timer I can't really give a specific answer but you should be able to apply this dummy code.