I have file Order.jsx

import axios from 'axios'
import { useEffect, useState } from 'react'
import {Link} from "react-router-dom"

export default function Order() {

const [items, setItems] = useState([{}])

const showItems = () => {
    axios('http://localhost:3001/viewOrder')
    .then((res) => {
      setItems(res.data)
      // I can see res.data is store in items useState
      console.log(items)
    }
    )
    .catch((error) => {
        console.log(error)
    } )
}
// I want to display each item from items useState
// when I try to remove the expression like items.map and replace it with like <h1>hello</h1> it's able to show data.
function displayItem() {
  return (
    items.map(
      (i) => {
        <div key={i._id}>
          <h5>{i.title} - {i.price}</h5>
          <Link to="/checkout" state={{id: i._id}}>
            <button>buy now</button>
          </Link>
        </div>
      }
    )
  )
}




useEffect(() => showItems(), [])

  return (
    <div>
      <h3>Orders</h3>
        {
          displayItem()
        }
    </div>
  )
}

My problem is no error showing in console. However the displayItem function is unable to display the items from my items useState.

I’m trying to fix this issue for almost 2 days

Thank you in advance

• vhon

I want to show the displayItem function data. Because it’s showing blank when I try to run it.