Im trying to format data that has to be displayed on <Text>. Here is my formatData() method:

getFormattedData = (idA, idB) => {
    var formattedData = "";
    if (idA != null && idA != "") {
        formattedData = formattedData + "&#8226;" + " " + idA
    }
    if (idB != null && idB != "") {
        formattedData = formattedData + "&#8226;" + " " + idB
    }
    return formattedData;
};

But in view, this is rendered as ABC &#8226; DEF. And not as ABC • DEF

When I use \u2B24 the bullet is very big and when using \2022, just the code is displayed.

How to render with getFormattedData()?

2 Answers

2
TimH On Best Solutions

To parse HTML Entities you can use the npm module html-entities.

import { Html5Entities } from 'html-entities'; 

render() {
    const entities = new Html5Entities();
    return (
      <SafeAreaView style={styles.container}>
        <View>
        <Text> {entities.decode('&#8226;')} </Text>
        </View>
      </SafeAreaView>
    );
  }
1
Community On

This works for me,

getFormattedData = (idA, idB) => {
    var formattedData = "";
    if (idA != null && idA != "") {
        formattedData = <div>{formattedData}&#8226;{idA}</div>
    }
    if (idB != null && idB != "") {
        formattedData = <div>{formattedData}&#8226;{idB}</div>
    }
    return formattedData;
};

render() {
    return (
        <div>{this.getFormattedData(12,"abc")}</div>
    );
  }

Output:

•12

•abc