I'm having issue on how to render a HTML API data name description in my react native code. Currently, the API data is in HTML format: HTML Format Data Image . I want to convert it to normal text like this: Normal Text Image. Please do help me out to solve this problem.
Given HTML API Data name: Given API Data name Image
This is my code:
return (
<ScrollView style={[GlobalStyle.CustomScrollView]}>
<HeaderBar3/>
<Text style={[GlobalStyle.EventTitle]}> Event Details</Text>
<View style={[GlobalStyle.EventDetailView]}>
<Image style={[GlobalStyle.EventDetailImage]} source={{uri: eventData.main_image}} resizeMode="contain"/>
<Text style={[GlobalStyle.EventSubtitle]}>Date:</Text>
<Text style={[GlobalStyle.EventDate]}>{date}</Text>
<Text style={[GlobalStyle.EventTime]}>{startTime}{'-'}{endTime}</Text>
<Text style={[GlobalStyle.EventSubtitle]}>Venue:</Text>
<Text style={[GlobalStyle.EventDescr]}>{eventData.venue}</Text>
<Text style={[GlobalStyle.EventSubtitle]}>Ticket:</Text>
<Text style={[GlobalStyle.EventTicketPrice]}>{eventData.promotional_price}</Text>
<Text style={[GlobalStyle.EventSubtitle]}>Description:</Text>
<Text style={[GlobalStyle.EventDescr]}>{eventData.description}</Text>
</View>
</ScrollView>
);
You can remove the HTML tags using .replace() method. Try this:
<Text style={[GlobalStyle.EventDescr]}>{eventData.description.replace(/(<([^>]+)>)/ig,'')}</Text>
Check the documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace