Reactjs Question posted in
The new location for the React Documentation can be found here.

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

I’m actually working on a fake Shopping cart project with React for The Odin Project ( a free cursus online to learn Javascript ). I’m working with Vite, React-Router and Vitest for this project. I have created a router with App component as homepage and it have a child "Landing" who is displayed in App by an Outlet. My App component is basically a Header component and Outlet ( supposed to display Outlet ). My Header component take 2 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, defaults 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’s work it’s when I delete 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;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I will respond to everyone here. :)

    My issue seems to be caused by Google Chrome. I'm actually working on a VM with Xubuntu and I've took Google Chrome from Software GUI App. It seems to be delivered by Google itself but maybe I should have downloaded it by terminal directly.

    I've tried with Edge and Firefox and it's working perfectly ( even React Dev Tools who wasn't working on Chrome ).

    Thanks all, I will try to use another installation way for Chrome and if it's not working anymore, I guess I will just have to stay on Firefox ( maybe not so bad )


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search