Not displaying items from .map() React-CodePudding

I'm using the same exact code from an existing file practically and the data I'm trying to display using map is only showing 1 part of it. I'm trying to display a table of data but only the header is appearing. I know my database calls are not the problem because I can see the data in my state component "purchases".

var navigate = useNavigate();

    // refundable purchases
    const [purchases, setPurchases] = useState([]);
    // current balance
    const [balance, setBalance] = useState(0);
    

    const Purchase = (props) => {
        // on click open interactive pop up confirming refund
        <tr>
            <td className='table-data'>{props.purchase.title}</td>
            <td className='table-data'>{numberFormat(props.purchase.amount)}</td>
        </tr>
    };

    useEffect(()=> {
        async function fetchData(){
            const purchaseResponse = await fetch(`http://localhost:4000/refund/`);

            if (!purchaseResponse.ok){
                window.alert(`An error occured: ${purchaseResponse.statusText}.`)
                return;
            }
            const data = await purchaseResponse.json();
            setPurchases(data);
        }
        fetchData();
        return;
    },[purchases.length]);



    function makeTable(){
        return purchases.map((element)=> {
            console.log(element);
            return (
                <Purchase
                    purchase={element}
                    key = {element._id}
                />
            );
        });
    }



    return (
        // Will Display
        <section>
        <div className='home'> 
            {/* Title */}
            <h1 className='hometitle'>
            Claim A Refund
            </h1>
            {/* Table of Clickable elements showing possilbe purchase refunds*/}
            <div>
                <table className='table' style={{marginTop:20}}>
                    <thead className='table-data'>
                        <tr>
                            <th className='table-header'>Title</th>
                            <th className='table-header'>Amount</th>
                        </tr>
                    </thead>
                    <tbody>{makeTable()}</tbody>
                </table>
            </div>
            {/* On selection of specific purchase :
                -> double check with user
                -> diplay alert box containing "Refund for <transaction title> made" */}
        </div>
        </section>
    );

I've been staring at this like a maniac and can't figure out why its not displaying.

CodePudding user response：

change <tbody>{makeTable()}</tbody> with {purchases.length > 0 && <tbody>{makeTable()}</tbody>} insted

CodePudding user response：

If you see no console output it means that your data did not loaded before the render of the .map maybe you can try this to wait for data.

function makeTable() {
  return (
    Object.keys(purchases || [])?.length > 0 &&
    Object.entries(purchases).map((element) => {
      console.log(element);
      return <Purchase purchase={element} key={element._id} />;
    })
  );
}

Also out of Context but for the useEffect you don't need to write "purchases.length". Only "purchases" will be enough.