React native : Passing HTML string to component is displaying as text

Question

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?

Answer 1

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>