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"
    }
]

CodePudding user response：

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;

CodePudding user response：

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.