How to call an event handler function from App.js in two other components

1

I created a reset function in App.js and want to call it by an onclick in two other components. the problem is that it works in one component but doesn’t in the other.

import GeneralResult from './components/GeneralResult';

    class App extends Component {
     constructor(props) {
        super(props);

        this.state = {

        result: '',
         counter: 0,
    }
    }

    // Reset function 
    handleReset=()=>{

        this.setState({
          result: '',
         counter: 0,
    )}

    renderResult() {
        return (
          <div>
     <Result reset={()=>this.handleReset()} />
    <GeneralResult back={()=>this.handleReset()} />

       </div>

        );
      }

//first component making use of reset()

    function Result(props) {
    	return (
     <div>	   
         <span>
             <button onClick={props.reset}>Replay</button>
         </span>						 
     </div>
               
      );
    }
     
    export default Result;

GeneralResult.js // second component making use of the reset

import React, { Component } from 'react';

export default class GeneralResult extends Component {

render() {

  return (

    <React.Fragment>

    <h2>Congratulations you won!</h2>
    <span>
      <button onClick={props.back}> Back to Question</button>
      </span>

    </React.Fragment>
  );
}
}
2

Which one isn’t working? Also, is Result in a separate file than App.js? Because you don’t import it within that file

4

this.setState closing brackets are in wrong order and the function closing bracket is also missing. I’m not sure how does your function works in even one component.