skip to Main Content

I am getting output correctly as JSON format. I need to display in this td coloum if the status is coming 1 I need to display it as true otherwise false.

const [tasks, setTasks] = useState([]);

useEffect(() => {
  (async () => await Load())();
}, []);

async function Load() {
  const result = await axios.get("http://localhost:5000/tasks");
  setTasks(result.data);
  console.log(result);
}

result displayed in json format

 {
   "_id": "64ad2fd352f8f6937e4bb6af",
   "title": "task1",
   "description": "task1 sf",
   "duedate": "2023-12-02T18:30:00.000Z",
   "status": "1",
   "__v": 0
 },

what I tried so far I attached below. i am getting result as {task.duedate} this way. i need
if result comes as 1. i need to display it as true and the text color needs to be changed as green

<td class="px-6 py-4">
    {
     if(task.status === "1"){
      //...
     }
     else{
      //...
     }
    }
</td>

2

Answers


  1. based on task.status you return the coresponding <span>

    <td className="px-6 py-4">
      {task.status === "1" ? (
        <span style={{ color: "green" }}>true</span>
      ) : (
        <span>false</span>
      )}
    </td>
    
    Login or Signup to reply.
  2. Something like this?

    <td class="px-6 py-4">
       {task.status === '1' ? <span style={{color:'green'}}>true</span> : <span style={{color:'red'}}>false</span>}
    </td>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search