Edit:

I'm encountering an issue in my React project where I'm trying to render an array of objects using the map function, and I'm getting the following Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead. If you meant to render a collection of children, use an array instead.

I've checked my code, and I believe the structure of my components and the data passed down are correct. Here are the relevant parts of my code:

// App.js: 

const fetchItems = async () => {
  try {
    const { data } = await axios.get('/api/items/');
    setItems(data);
    console.log(data);
  } catch (error) {
    console.error('Error fetching items:', error.message);
    console.error(error);
  }
  console.log(items);
}
fetchItems();
}, []);


const handleOnClick = (e) => {
     e.preventDefault();
     const filteredItems = getFilteredItems(items, query);
     setItems(filteredItems);
    };

return (
  

    
    
  
);







// Items.js: 

function Items({ items }) {
  return (

{items.map(item => (


{item.product_name}
Buy Now{item.price}$
{item.description}

))}
 
 );
}

export default Items;

I've confirmed that the objects in my items array are correctly formatted, and here's an example of what's in my database:

[ { "_id": "655b5295f2b8973f21e9a676", "product_name": "Dell XPS 13 Laptop", "price": 1299, "description": "Experience powerful performance in a sleek design with the Dell XPS 13 Laptop. This ultrabook features a virtually borderless InfinityEdge display and delivers reliable computing for on-the-go professionals.", "image": "https://m.media-amazon.com/images/I/81o2W1xNpzL._AC_SX679_.jpg" }, // ... (other items) ]

I've already tried restructuring the items prop in the Items component, but I still get the error. I understand that I cant directly pass arrays or objects but I did destructor it error:

Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead. at throwOnInvalidObjectType (http://localhost:3000/static/js/bundle.js:28898:13) // ... (other error details)

I'm building a search bar for my e-commerce project, and any guidance or suggestions on resolving this issue would be highly appreciated.

Thank you!