0

I have react native component (For Eg: myComponent) which has the below code to display text from this.props.text. This text props is defined as string in myComponent.

<Text size='large'
            style={styles.text}
            textId={this.props.text}
            values={this.props.values}>
          {this.props.text}
 </Text>

When I give text as below by sending an action, It is displaying the the text as String.But I am expecting component to display as blue highlighted Link 

yield put(myComponent.displayAction(displayType,"<Text suppressHighlighting={false} style={{backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue'}} onPress={() => null}>Link</Text>}")

If i directly hardcode the string in myComponent, It is displaying the Link where we can perform onclick.

<Text size='large'
        style={styles.text}
        textId={this.props.text}
        values={this.props.values}>
      //{this.props.text} => removed this and hardcoded the string below
      "<Text suppressHighlighting={false} style={{backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue'}} onPress={() => null}>Link</Text>}"

Any help to display this as Link?

Tutu
  • 99
  • 1
  • 2
  • 14

1 Answers1

0

You cannot use a string with JSX in it as an element. In your hardcoded example, the compiler is treating it as an element, and ignoring the quotes.

Changing the text prop to be an element rather than a string, and then passing that element to displayAction instead, should work.

Alternatively, you can have the text prop contain the text instead of the element, and display it as so:

<Text suppressHighlighting={false} style={{backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue'}} onPress={() => null}>{this.props.text}</Text>
Oden
  • 628
  • 6
  • 14
  • Thanks. If i go for below code, How to handle the onPress from my class and not from the component? null}>{this.props.text}, – Tutu Dec 17 '16 at 04:02
  • @Tutu You can pass an `onPress` handler in the props too. – Oden Dec 19 '16 at 01:28