reactjs error : TypeError: Cannot read property 'props' of undefined

Question

I'm Learning reactjs from some courses/videos and so far I'm really bad at it and I checked a few times and i couldn't see the error. So I can't understand this error. Can somebody help please?? this is my code:

import React, { useState } from 'react';
import CartSummary from './CartSummary'


import CategoryList from './CategoryList'
import ProductList from './ProductList'
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  NavbarText
} from 'reactstrap';

const Navi = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <Navbar color="light" light expand="md">
        <NavbarBrand href="/">Nortwind App</NavbarBrand>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="mr-auto" navbar>
            <NavItem>
              <NavLink href="/components/">Components</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
            </NavItem>
            <CartSummary cart={this.props.cart}></CartSummary>
          </Nav>
          <NavbarText>Simple Text</NavbarText>
        </Collapse>
      </Navbar>
    </div>
  );
}

export default Navi;

this is the Error:

 37 |     <NavItem>
  38 |       <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
  39 |     </NavItem>
> 40 |     <CartSummary cart={this.props.cart}></CartSummary>
     | ^  41 |   </Nav>
  42 |   <NavbarText>Simple Text</NavbarText>
  43 | </Collapse>

So can someone help me please?

you don't need the this keyword here. It is usually used with class based components. You are using a react functional component. — MjZac
– MjZac, Commented Aug 21, 2020 at 10:45
What do you think this is referring to here? props has been declared as a parameter of your fat arrow function... There is no this. — Snowmonkey
– Snowmonkey, Commented Aug 21, 2020 at 10:46

Hovakimyan · Accepted Answer · 2020-08-21 10:46:26Z

2

problem is in this line

<CartSummary cart={this.props.cart}></CartSummary>

Here you need to write

<CartSummary cart={props.cart}></CartSummary> as you use functional component

answered Aug 21, 2020 at 10:46

Hovakimyan

5583 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniil Emelin · Accepted Answer · 2020-08-21 10:53:08Z

1

You don't have to use keyword this here, because its functional component.

Btw I recommend you to read about prop-types library. It helps you to define default props to avoid undefined props errors.

answered Aug 21, 2020 at 10:53

Daniil Emelin

2711 silver badge5 bronze badges

Collectives™ on Stack Overflow

reactjs error : TypeError: Cannot read property 'props' of undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related