CODEWITHSUNDEEP
reactjsreact-native
Jee
Jee

Reputation: 28

decodeURIComponent in React

I am currently working on a react-native application but I am facing a problem. I am fetching data from an API, data look like this

{
  "current":{
    ...
    "name": " - Kraftwerk - It's More Fun to Compute ",
    ...
  }
}

I would like to decode this string to display it in my view in order to transform the It's into It's.

I tried to decode it with the JavaScript function decodeURIComponent before updating the state but unfortunately it doesn't work. My view still shows It's.

Here is my component (simplified)

import React, {useState, useEffect} from "react";
import { View, StyleSheet, Text, ActivityIndicator } from "react-native"

const Metadata = props => {

    const [track, setTrack] = useState({
        name: "",
        type: ""
    });
 
    const trackinfo = (data) => {
        
        let trackName = decodeURIComponent(data['current']['name']);
        let trackType = data['current']['type'];

        setTrack({
            name: trackName,
            type: trackType
        });

    useEffect(() => {
      ...
    }, []);
 
    return (
        <View style={styles.container}>
            <Text>
                {track['name']}
            </Text>
        </View>
    );
};

export default Metadata;

Any ideas why decodeURIComponent() as no effect ?

Thank you

Upvotes: 0

Views: 2142

Answers (1)

Ugur Eren
Ugur Eren

Reputation: 2204

You can use the decode function of html-entitites library.

import {decode} from 'html-entities';

let trackName = decode(data['current']['name']);

Upvotes: 2

Related Questions