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?
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:)
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
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
I would like to check the efficiency of my functions, let's say to find a prime number, I wrote something like:
I have a html pageThere are two images on this page
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 ,