HI everyone, I am having an unusual issue. I am building an Ecommerce website and I building the item pages.
I built the array and page for one item, and I am planning to have all of them map through an ItemDisplayer. This worked fine for the first item, but when I copied the component, changed all the names it now renders nothing at all.
class Iron extends Component {
constructor() {
super();
this.state = { items: [
{
title: 'Iron age axe',
imageUrl: "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.6VlNGksN5K9h8VpDxMsH5gHaLI%26pid%3DApi&f=1",
price: '$60',
id: 1,
desc: 'For chopping down "trees" ',
catagory: 'axe'
},
/* Array edited for space */
]
}
}
render() {
return (
<div className="FullPage Container">
<div className="Iron">
<h1>The Iron age. Before Humanity mastered steel production, but had advanced beyond bronze weapons and tools.</h1>
<div className="ItemList row">
{
this.state.items.map(({title, imageUrl, desc, price, id }) => (
<DisplayItem key={id} title={title} imageUrl={imageUrl} desc={desc} price={price} />
))}
</div>
</div>
</div>
)
}
}
export default Iron;
My other component looks exactly like this, (with the names and array values changed) and is rendering fine.
Can anyone help me figure out what is going on? Thank you.