Link to a component in React/Semantic UI with onClick

Question

I need a modal to open with onClick, the variable calling the modal is nested between Translation keys. Here's some of the code. When clicking the link text, I currently have this error message: Cannot read property 'modaleNouvelleOeuvre' of undefined :-/

modaleNouvelleOeuvre(ouvert = true) { /*Ouvert means Open*/
this.setState({ modaleOeuvre: ouvert })
}

{t('flot.split.tableaudebord.vide.indication')}
<a href="#" onClick={(e) => { e.preventDefault(); this.modaleNouvelleOeuvre() }}>
{t('flot.split.tableaudebord.vide.indication-lien')}</a>

There's a button elsewhere on the page to open the same modal:

<Modal
open={this.state.modaleOeuvre}
onClose={() => { this.modaleNouvelleOeuvre(false); if (this.state.audio) this.state.audio.stop() }}
size="large"
closeIcon
closeOnDimmerClick={false}
>

Can you add more code or code sandbox link? It's hard to tell from this? — Shubham Verma
– Shubham Verma, Commented Oct 25, 2019 at 19:54

Asolace · Accepted Answer · 2019-10-25 20:33:57Z

1

That's because you're invoking this.modaleNouvelleOeuvre() inside the <a>.

<a href="#" onClick={this.modaleNouvelleOeuvre}>

modaleNouvelleOeuvre(e) {  
  e.preventDefault()
  this.setState({ modaleOeuvre: !this.state.ouvert })
}

Note: e or event is implicit.

answered Oct 25, 2019 at 20:33

Asolace

1,0768 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Link to a component in React/Semantic UI with onClick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related