Typescript: TypeError is undefined

Question

I'm fairly new to Typescript and React. I've been trying to implement the react-rewards npm library and I have solved all except one issue.

type Props = {}

class Surprisebutton extends Component<Props>{
    reward: any;

    render() {
        return (
            <Reward 
            ref={(ref) => { this.reward = ref }}
            type='memphis'>
                <Button onClick={this.reward.rewardMe()} style={styles.button} variant="contained" color="primary">
                    Surprise!
              <FavoriteIcon style={{ marginLeft: 10 }} />
                </Button>
            </Reward>
        )
    }
}

After running npm start I get an error which says TypeError: this.reward is undefined. What is the best way to resolve?

Andrew · Accepted Answer · 2019-05-16 22:56:32Z

1

It has nothing to do with TypeScript. TS is only a compiler and linter and you're getting a runtime error. It's this line:

this.reward.rewardMe()

The ref gets assigned after the component fully mounts and rewardMe() is attempting to call it immediately. This is also a secondary mistake. You don't want to use the () invocation or the function is going to immediately fire (and never stop).

The line should be

<Button onClick={this.reward.rewardMe} style={styles.button} variant="contained" color="primary">

answered May 16, 2019 at 22:56

Andrew

7,5855 gold badges28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dwayne Over a year ago

Thanks Andrew! Checking this currently

Dwayne Over a year ago

I get the Property 'reward' does not exist on type 'Surprisebutton'. error when trying this approach as well. Declaring reward as a property by using reward: any; before render seems to get rid of the error in the compiler but when running npm start I still get the TypeError: this.reward is undefined error in browser.

Andrew Over a year ago

You changed the onClick handler and it still did not work? There is a chance that the library doesn't accept a ref prop. Property 'reward' does not exist on type 'Surprisebutton' is a typescript type definition. TypeError is a javascript error. If you got it immediately without clicking the button, then you forgot to change the click handler

Dwayne Over a year ago

I actually did change the onClick handler. Also, this implementation is directly from their documentation [github.com/thedevelobear/react-rewards] I'm also seeing a suggestion under ref={(ref)... which states Parameter 'ref' implicitly has an 'any' type, but a better type may be inferred from usage.

dalthonmh Over a year ago

Excuse me but there is an example using it with functional componets?

Shivam · Accepted Answer · 2019-05-16 22:52:20Z

0

I might be wrong because I never used this package but according to documentation/Useage topic. They are not initializing reward variable. Try removing that, Here's the fixed version

type Props = {}

class Surprisebutton extends Component<Props>{

render() {
    return (
        <Reward 
        ref={(ref) => { this.reward = ref }}
        type='memphis'>
            <Button onClick={this.reward.rewardMe()} style={styles.button} variant="contained" color="primary">
                Surprise!
          <FavoriteIcon style={{ marginLeft: 10 }} />
            </Button>
        </Reward>
    )
  }
}

Again I might be wrong but according to the github page i thinks that's the only thing i can infer.

answered May 16, 2019 at 22:52

Shivam

3,6622 gold badges15 silver badges30 bronze badges

2 Comments

Dwayne Over a year ago

Thanks for the insight, will check this and let you know if it works or not

Dwayne Over a year ago

This doesn't seem to work Shivam, I get the Property 'reward' does not exist on type 'Surprisebutton'. error.

Aajinkya Singh · Accepted Answer · 2021-02-22 18:28:22Z

0

Change your onClick to something like this:

onClick={() => {this.reward.rewardMe()}}

answered Feb 22, 2021 at 18:28

Aajinkya Singh

7131 gold badge8 silver badges15 bronze badges

Collectives™ on Stack Overflow

Typescript: TypeError is undefined

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related