Why is one component rendering and the other not? -React

Why is one component rendering and the other not? -React
0

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.

For other people here, be sure to check the capitalization on your component’s names.