React Native promise pass the value to variable as string

user_18279705 0
Viewed 288

I am new to React Native. I have to create a promise and be able to get the response data.

export async function findColor() {
    
        try{
            const token = await AsyncStorage.getItem('token');
            const id = await AsyncStorage.getItem('id');

            const resp = (
                await api(token).get(`api/blockgroup/getList`)
            ).data;
           
            const retVal = '"' + resp.data[0].template.mcolor +'"';
            
            console.log (typeof retVal, retVal, 'retvalue');
       
            return retVal;
        }
        catch(err){
            return {
                error: true,
                code: err.request.status,
            };
        }
    }

But when I called the function I get something like this

{"_U": 0, "_V": 0, "_W": null, "_X": null}

I found out that I can access the value by using .then() as I tried to printout the value to console:

findColor().then(response => console.log(response));

I got the string value

"#0eade1"

But I don't know how can I pass the value to a variable as a string? Let's say I want to create a variable color and pass the value "#0eade1" to it. How can I do that?

I really appreciate if anyone can help me. Thanks!

EDIT: i just want to make this clear. i need to pass the value only as string because i need to pass it to another module from import. i have config module where i need to change my theme color with the value from hook i called. thats config will only accept string object, and i don't know if i should use react native component in config module.

es6-promise react-native react-hooks javascript
2 Answers

You could create a hook that handles that. Consider the following snippet.

export function useColor() {
    const [color, setColor] = useState()

    React.useEffect(() => {

        // you should add your function in here
        findColor().then(response => setColor(response))

    }, [])
    
    return {
        color,
    }
}

Then use your hook in your screen, whenever you need color.


const TestScreen = () => {

    // color can used however you like
    const {color} = useColor()
}

Edit: Judging from the comments you are using a class component which does not allow the use of hooks. We can still do the same.

constructor(props) {
    ...
    this.state  =   {
       color : "",
    }
}
componentDidMount() {
    findColor().then(response => this.setState({color: response}))
}

render() {
   return <Text>this.state.color</Text>
}
user_149692810

You should try this by this you can use this as normal function call.

export async function findColor() {
            const token = await AsyncStorage.getItem('token');
            const id = await AsyncStorage.getItem('id');
            api(token).get(`api/blockgroup/getList`)
            .then(resp=>{
              const retVal = '"' + resp.data[0].template.mcolor +'"';
            
              console.log (typeof retVal, retVal, 'retvalue');
       
              return retVal;
            });
            .catch((err){
            return {
                error: true,
                code: err.request.status,
            };
        })
    }
user_40302200
Related