deal with boolean api in js - node.js

Question

One of my api response with boolean(with the name: used), my logic is if the response is used will show red_light and green_light if not used.
const red_light = <div className="h-2.5 w-2.5 rounded-full bg-red-700 mr-2"></div>
const green_light = <div className="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div>
function lighting(code) {
fetch(`API`)
.then((response) => {
if (!response.ok) {
throw new Error(
`This is an HTTP error: The status is ${response.status}`
);
}
return response.json();
})
.then((actualData) => {
return (actualData.used ? red_light : green_light)
})}
const MembershipLight = (code) => {
return (
lighting(code)
);
};
export default MembershipLight;
but the page gone blank, which part i am doing wrong?
i try to console.log with the actualData, it shows the whole part of the response including used with true/false, but when i console.log("actualData.used"), it shows undefined in the console.
actureData (from postman)
[
{
"used": true,
"create_date": "1644490502",
"update_date": "1666694655"
}
]

Answer 1

You should probably change approach and declare a used state to store the returned boolean value and use conditional rendering to adjust the class accordingly.
Also, as suggested by #KcH, if your response is an array, you should access the element with an index:
import { useState, useEffect } from 'react';
const MembershipLight = (code) => {
const [used, setUsed] = useState(false);
const lighting = () => {
fetch(`API`)
.then((response) => {
if (!response.ok) {
throw new Error(
`This is an HTTP error: The status is ${response.status}`
);
}
return response.json();
})
.then((actualData) => {
if (actualData.length > 0) {
setUsed(actualData[0].used)
}
})
.catch((err) => console.log(err));
}
useEffect(() => {
lighting();
}, []);
return <div className={`h-2.5 w-2.5 rounded-full mr-2 ${used ? 'bg-red-700' : 'bg-green-400'}`}></div>;
};
export default MembershipLight;

Answer 2

Furthermore, you're not returning anything from your lighting function. You should return the result of the fetch. Currently, your MembershipLight returns undefined due to that.