How do I invoke another function on another react component?

545
January 15, 2017, at 9:18 PM

I am new in es6, this code works in React.createClass. I have a total 2 function that I want to pass on another component, my problem is I am confused with its' context, my code is like this:

class AppOne extends React.Component {
 constructor(props) {
  super(props);
 this.state = {
      timers: [
        {
            title: 'Practice squat',
            project: 'Gym Chores',
            id: v4(),
            elapsed: 5456099,
            runningSince: Date.now()
        },
        {
            title: 'Bake squash',
            project: 'Kitchen Chores',
            id: v4(),
            elapsed: 1273998,
            runningSince: null
        },
      ],
    };
  this.func = this.func.bind(this);
  this.stopTimer = this.stopTimer.bind(this); //<--"Uncaught TypeError: this.stopTimer is 
// not a function"
 } 
 func(timerId) {
        this.stopTimer(timerId);
 }
 stopTimer(timerId) {
    const now = Date.now();
    this.setState({
        timers: this.state.timers.map((timer) => {
            if(timer.id === timerId) {
                const lastElapsed = now - timer.runningSince;
                return Object.assign({}, timer, {
                    elapsed: timer.elapsed + lastElapsed,
                    runningSince: null
                });
            } else {
                return timer;
            }
        }),
    });
}
 render() {
  return (
   <AppTwo handleFuncFromAppOne = {this.func} timers={this.state.timers} />
  );
 }
}
class AppTwo extends React.Component {
 handleFuncFromAppTwo() {
  this.props.handleFuncFromAppOne(this.props.timers.id)
 }
 render() {
  return(
   <AppThree handleFuncFromAppThree={this.handleFuncFromAppTwo} />
  );
 }
}
class AppThree extends React.Component {
 render() {
  return (
   <div
    className='ui bottom attached red basic button'
    onClick={this.props.handleFuncFromAppThree} // I want to invoke here
   >
    Stop
   </div>
  );
 }
}

You see I already bind stopTimer its' this on App One and it use this.setState to change the state, my problem is I cannot Invoke it on App three. My error is "Uncaught TypeError: this.stopTimer is not a function". I don't seem to have this problem with React.createClass. Help?

Answer 1

Ok, your problem is you are not passing reference of the class where you defined handleFuncFromAppThree() you can do like this:

//class Apptwo

 render() {
  return(
   <AppThree parentObje={this} /> //pass reference not function
  );
 }
//class AppThree
<div
    className='ui bottom attached red basic button'
    onClick={this.props.parentObj.handleFuncFromAppThree()} // invoke the //function like this
   >

you can so similarly for class Appone.

Cheers:)

Rent Charter Buses Company
READ ALSO
Escape Single Quote Twice in Javascript

Escape Single Quote Twice in Javascript

I come across the situation that I need to use the escape quote twiceSpecifically, I need to put an variable in javascript function with single quotes, but the variable itself also has single quotes

682
function efficiency measuring javascript

function efficiency measuring javascript

I would like to check the efficiency of my functions, let's say to find a prime number, I wrote something like:

544
generated pdf file from jsPDF library , does not open in adobe reader

generated pdf file from jsPDF library , does not open in adobe reader

I have a html pageThere are two images on this page

1284
is javascript now support classes or not and why i feel no stability?

is javascript now support classes or not and why i feel no stability?

kindly from couple of days till now I am confusing about how are some articles say that JavaScript Supports Classes and many FAQS, StackOverflow Threads and articles say the opposite? please clearly answer ,

439