Why cannot destructure property of "undefined " as it is undefined when parent Component give values?

Question

I'm working on a fake shopping cart project with React for The Odin Project (a free course online to learn Javascript). I'm working with Vite, React-Router, and Vitest for this project. I have created a router with an App component as the homepage and it has a child "Landing" that is displayed in App by an Outlet. My App component is basically a Header component and Outlet (supposed to display Outlet.) My Header component takes two props, items and sum and inside this component, I've declared defaultProps with fake values.

No matter how I try to pass on values for Header props, none of them work. Values by parent ( App ) don't work, default values inside declaration ( not sure if it's called declaration so => ({items = 3, sum = 51 }) ) don't work and defaultProps don't work either. The only case where it works is when I delete the sum and strangely, items get the correct value.

Here you can find my repo: https://github.com/Hachounet/shopping-cart

import { createBrowserRouter } from 'react-router-dom';
import App from '../App';
import Landing from '../components/Landing';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '/landing',
        element: <Landing />,
      },
    ],
  },
]);

export default router;

import './App.scss';
import Header from './components/Header';
import { Outlet } from 'react-router-dom';

function App() {
  return (
    <>
      <Header
        items={3}
        sum={151}
      />
      <Outlet />
    </>
  );
}

export default App;

import styles from '../Header.module.scss';
import PropTypes from 'prop-types';

const Header = ({ items, sum }) => {
  console.log(items);
  return (
    <header className={styles.header}>
      <div className="noto-serif">L`Usine</div>
      <div>
        <button>Home</button>
        <button>Shop</button>
      </div>
      <div className={styles['cart-container']}>
        <p>{items} Items</p>
        <p>{sum} euros</p>
        <img
          src="src/assets/cart.svg"
          alt="Cart"
        ></img>
        <button>Go to checkout</button>
      </div>
    </header>
  );
};

Header.propTypes = {
  items: PropTypes.number,
  sum: PropTypes.number,
};

Header.defaultProps = {
  items: 3,
  sum: 72.57,
};

export default Header;

Answer 1

I would recommend you to use this way to set default props as the usage of defaultProps is reduced in the modern React development.

import styles from '../Header.module.scss';
import PropTypes from 'prop-types';

const Header = ({ items = 3, sum = 72.57 }) => {
  console.log(items);
  return (
    <header className={styles.header}>
      <div className="noto-serif">L`Usine</div>
      <div>
        <button>Home</button>
        <button>Shop</button>
      </div>
      <div className={styles['cart-container']}>
        <p>{items} Items</p>
        <p>{sum} euros</p>
        <img
          src="src/assets/cart.svg"
          alt="Cart"
        ></img>
        <button>Go to checkout</button>
      </div>
    </header>
  );
};

Header.propTypes = {
  items: PropTypes.number,
  sum: PropTypes.number,
};

export default Header;

Answer 2

As everyone else said, the code mostly seems correct. The one point I might make, that could possibly be causing this in your own environment, is the way you use Header.defaultProps. Since typescript kind of took over the whole javascript world, PropTypes kind of died so I'm not sure if this is a legitimate syntax or not, but you can do the same thing directly inline in a syntax that I know is correct by replacing:

const Header = ({ items, sum }) => {
...
};

Header.propTypes = {
  items: PropTypes.number,
  sum: PropTypes.number,
};

Header.defaultProps = {
  items: 3,
  sum: 72.57,
};

with:

const Header = ({ items=3, sum=72.57 }) => {
...
};

Header.propTypes = {
  items: PropTypes.number,
  sum: PropTypes.number,
};

Other than that possible error, everything else is correct.