Why am I getting this error in my CollectionCard.js (REACT)

Question

In my console I am getting the following error

CollectionCard.js:15 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at CollectionCard 

Here is my app.js

    import './App.css';
    import CollectionCard from './components/CollectionCard';
    import Header from './components/Header';
    
    function App() {
      return (
        <div className='app'>
          <Header />
          <CollectionCard id={0} name={'Sgt Wizard'} traits={[{'value': 7}]} image= 'https://ipfs.thirdweb.com/ipfs/QmVWP53xJm9VpCg6nyDoZAbY3P6WXdFsGX9nZ47q6JNEyM/0.jpg' />
        </div>
        
      )  
    }
    
    export default App;

Here is my CollectionCard.js where the problem is coming from

    import React from 'react';
    import weth from '../assets/weth.png'
    
    const CollectionCard = (id , name , traits , image) => {
      return (
        <div className='collectionCard'>
            <img src={image} alt='' />
            <div className='details'> </div>
            <div className='name'>
                {name} <div className='id'>.#{id}</div>
            </div>
    
            <div className='priceContainer'>
                <img src={weth} alt=""  className='wethImage'/>
                <div className='price'>{traits[0]?.value}</div>
            </div>
                
        </div>
        )
    };
    
    export default CollectionCard;

Any idea what I am doing wrong? Any help is really appreciated! Thank you in advance

Answer 1

My first guess would be that you're not destructuring your props:

const CollectionCard = (id , name , traits , image) => {

Should be:

const CollectionCard = ({ id , name , traits , image }) => {