CODEWITHSUNDEEP
javascriptreact-nativethis
Siya Mzam
Siya Mzam

Reputation: 4705

Keep this context across objects

I am using this tooltip for displaying some information. When one of the options is clicked, I want to show the next tooltip. The way this transitioning has been set up by the library author is through refs, and in this case, the refs work well when they are string literals. However, string literals are deprecated in React16+.

The workaround is to use createRef and I did that. It works for the first popup, but fails when having to transition because this refers to the immediate object it is used in.

Below is the code I have written. How can I change it such that this refers to the correct object?

//Constructor
constructor() {
 super();
 this.firstToolTip= React.createRef();
 this.secondToolTip = React.createRef();
}
//Body of render method
<PopoverTooltip
   ref={this.firstToolTip}
   buttonComponent={button}
   items={[
     {
       label: 'Some text for the tootip',
       onPress: () => {                     
         this.refs[this.secondToolTip].toggle();
       }
     }
   ]}
/>

<PopoverTooltip
   ref={this.secondToolTip}
   buttonComponent={button}
   items={[
     {
       label: 'Some text for the tootip',
       onPress: () => {}
     }
   ]}
/>

I understand that, as the other posts I have read here mention, I could bind this but createRef returns undefined hence that is quite impossible to do.

Upvotes: 0

Views: 48

Answers (1)

LHIOUI
LHIOUI

Reputation: 3337

Try to bind the click function like this. 

//Constructor
constructor() {
  super();
  this.firstToolTip= React.createRef();
  this.secondToolTip = React.createRef();
  this.clickOnFirstTooltip=this.clickOnFirstTooltip.bind(this);
}
 //Added func
 clickOnFirstTooltip(){
   // ref.current to acccesss the tooltip 
   this.secondToolTip.current.toggle();
 }
//Body of render method
<PopoverTooltip
  ref={this.firstToolTip}
  buttonComponent={button}
  items={[
    {
   label: 'Some text for the tootip',
    onPress:this.clickOnFirstTooltip
   }
  ]}
/>

<PopoverTooltip
  ref={this.secondToolTip}
  buttonComponent={button}
  items={[
    {
      label: 'Some text for the tootip',
      onPress: () => {}
     }
   ]}
  />

Upvotes: 1

Related Questions