When I map my array list of objects in the same file it works without any problems,
but once I try to pass the data to ‘DisplayWeapon’ it’s either empty or not of type array
and I get the error TypeError: items.map is not a function
import React, { useState, useEffect } from "react";
import { weapons } from "./WeaponsList";
import DisplayWeapon from "./components/DisplayWeapon";
const App = () => {
const [items, setItems] = useState([]);
useEffect(() => {
setItems(weapons);
}, []);
return (
<div className="container">
<DisplayWeapon items={items} />
</div>
);
};
export default App;
and ‘DisplayWeapon.js’
import React from "react";
const DisplayWeapon = (items) => {
console.log(items);
return (
<div>
{items.map((item) => (
<h1>{item.name}</h1>
))}
</div>
);
};
export default DisplayWeapon;
and here is my alternative version, which works fine
import React, { useState, useEffect } from "react";
import { weapons } from "./WeaponsList";
//import DisplayWeapon from "./components/DisplayWeapon";
const App = () => {
const [items, setItems] = useState([]);
useEffect(() => {
setItems(weapons);
});
return (
<div className="container">
<div>
{items.map((item) => (
<h1>
{item.name} {item.id}
</h1>
))}
</div>
</div>
);
};
export default App;
Also here is my ‘WeaponList.js’ which I think is fine, but still
export const weapons = [
{
name: "Sword",
id: 1,
},
{
name: "Axe",
id: 2,
},
{
name: "Greatsword",
id: 3,
},
{
name: "Hammer",
id: 4,
},
];
I can’t seem to find the issue