Cannot convert reponse.data to string in ReactJS

Question

import React, { Component } from 'react'
import TaskOneServices from '../services/TaskOneServices'
import circle from '../assets/icons/dry-clean.png'
import tick from '../assets/icons/check-mark.png'

async function showImage (taskId)  {

    var getStatus = (await TaskOneServices.getStatus(taskId))?.data;

    JSON.stringify(getStatus);

    console.log(typeof(getStatus)); //prints object

    console.log(getStatus === "CREATED"); //prints false

    if(getStatus === "CREATED") {
        return (
            <img className="img-lm" src={circle} alt="bullets" onClick={(ev) => {taskCompleted(ev, taskId)}}/>
        )
    } else {
        return (
            <img className="img-lm" src={tick} alt="checked" onClick={(ev) => {taskCompleted(ev, taskId)}}/>
        )
    } 
    
}

function taskCompleted(e, taskid) {
    if(e.target.getAttribute('src') === circle) {
        e.target.setAttribute( 'src', tick);
        e.target.setAttribute( 'alt', 'checked');
        updateTask(taskid);
        // strikeThroughFn(taskid);
    } else {
        e.target.setAttribute( 'src', circle);
        e.target.setAttribute( 'alt', 'bullets');
        updateTask(taskid);
    }
    }

    function updateTask(id) {

        JSON.stringify(id);
        TaskOneServices.updateTask(id).then((response) => {
            console.log(response)
        });
    }

export default class TaskListComponent extends Component {

    constructor(props) {
        super(props)
        this.state = {
            task_one:[],
        }

        this.deleteTask = this.deleteTask.bind(this)
        // this.updateTask = this.updateTask.bind(this)
    }
    //------- showing error -------------
    componentDidMount() {
        TaskOneServices.getTasks().then((response) => {
            this.setState({task_one: response.data})
        });
    }
    //------- showing error -------------

    deleteTask = (id) => {
        
        JSON.stringify(id);
        TaskOneServices.deleteTask(id).then((response) => {
            this.refreshPage();
        });
    }
    
    refreshPage = () => {
        window.location.reload();
    }

    strikeThroughFn(taskid) {
        // JSON.stringify(taskString);
        console.log(taskid);
        var fetchTask = document.getElementById('strikeTask');
        fetchTask.innerHTML = <strike> + {taskid} + </strike>
    }

    render() {
        return (
            <div className="container-fluid bg-white">
                <div className="row">
                    <table className="table border-bottom table-pad">
                        <tbody>
                        {
                            this.state.task_one.map(
                                task =>
                                <tr key = {task.id}>
                                    <td width="60px">
                                         {showImage(task.id)}
                                    </td>
                                    <td id="strikeTask">{task.task}</td>
                                    <td width="60px">
                                        <button type="button" className="close text-danger btn-close-style" onClick={() => this.deleteTask(task.id)}>
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </td>
                                </tr>
                            )
                        }
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }
}

I want to compare the getStatus and string "CREATED" and if both are equal I want to return the inner block of code. But getStatus has a type of object and "CREATED" is a string. So it returns false. I tried JSON.stringify() and it still returns false. Is there any way that I could convert that object to string?

Answer 1

You are using a promise so the .then() will be triggered after your function, you want to await the result of the promise and so use the await keyword with an async function. REMEMBEr that async function return also a promise

async function showImage (taskId)  {

    var getStatus = (await TaskOneServices.getStatus(taskId))?.data;

    JSON.stringify(getStatus);

    console.log(typeof(getStatus)); //prints object

    console.log(getStatus === "CREATED"); //prints false

    if(getStatus === "CREATED") {
        return (
            <img className="img-lm" src={circle} alt="bullets" onClick={(ev) => {taskCompleted(ev, taskId)}}/>
        )
    } else {
        return (
            <img className="img-lm" src={tick} alt="checked" onClick={(ev) => {taskCompleted(ev, taskId)}}/>
        )
    } 
    
}