TypeError: Cannot read properties of undefined (reading 'preventDefault!!')

Question

I keep getting the above below when I run this code I don't see anything wrong with it and I don't know why its returning the above error. it use to work before, but after coming back to it today, it gave me this error. Is there an issue with this?

TypeError: Cannot read properties of undefined (reading 'preventDefault!!')

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import styled from "styled-components";
import { axiosWithAuth } from "./auth/axiosWithAuth";
import { useHistory, useParams} from "react-router-dom";
import { deleteItem, getItems, addItems} from "./state/actionCreators";


const FetchData = props => {
const { id } = useParams();
const [ item ] = useState([])

function addItems(e, item){
  e.preventDefault();
  addItems(item)
}


        return (
            // <Link to={`/Cart/${props.item}`}>
              <div className="item-card-container">
              <StyledItems className="styled-card">
              <h4>{props.item.title}</h4>
              <img src ={props.item.image} alt= '' />
              <h4>{props.item.description}</h4>
              <h4>${props.item.price}</h4>
              <h4>{props.item.category}</h4>

              <button onClick={(e, item) => addItems(e, item)}>
                        Add to cart
                    </button>
        </StyledItems>
        </div>
    // </Link>
  );
};

const mapDispatchToProps = dispatch => ({
  addItem: item => dispatch(addItems(item))
});

export default connect(
  null,
  mapDispatchToProps
)(FetchData);

You have two `addItems`, one is an action and one is a click listener. Change one of the functions' name. — Titus, Jan 12 '22 at 16:13
`addItems} from "./state/actionCreators";` and `function addItems(e, item){` are named the same. Please consider renaming the one of them? — evolutionxbox, Jan 12 '22 at 16:20
`addItems(item)` is calling the function two lines above `addItem(e, item) {...}`. item doesn't have a preventDefault function and is actually undefined because the onClick event is only given one argument. — Arye Eidelman, Jan 12 '22 at 16:51
`onClick={(e, item) => addItems(e, item)}` will be `onClick={(ClickEvent, undefined) => addItems(ClickEvent, undefined)}` it should be `onClick={(e) => addItems(e, item)}` — Arye Eidelman, Jan 12 '22 at 16:54
Also buttons (outside of forms) do not have defaults that need to be prevented — Arye Eidelman, Jan 12 '22 at 16:58
@AryeEidelman I have changed it to this but i get this error TypeError: e.preventDefault is not a function — joe, Jan 12 '22 at 17:35
@evolutionxbox I changed the name of one of them as u told me to when i click the button it doesnt do anything — joe, Jan 12 '22 at 17:36

Arye Eidelman · Answer 1 · 2022-01-19T20:51:31.330

Fix naming conflicts

Only accept one argument in event handler

Call the redux action creater functions from the props (after they have the dispatch wrapper) not directly from the imports. Otherwise they will simply return the action without dispatching them to the store.

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import styled from "styled-components";
import { axiosWithAuth } from "./auth/axiosWithAuth";
import { useHistory, useParams} from "react-router-dom";
import { deleteItem, getItems, addItems} from "./state/actionCreators";


const FetchData = props => {
    const { id } = useParams();
    const [ item ] = useState([])

    function addItemHandler(e, item){
        e.preventDefault();
        props.addItem(item)
    }


        return (
            // <Link to={`/Cart/${props.item}`}>
              <div className="item-card-container">
              <StyledItems className="styled-card">
              <h4>{props.item.title}</h4>
              <img src ={props.item.image} alt= '' />
              <h4>{props.item.description}</h4>
              <h4>${props.item.price}</h4>
              <h4>{props.item.category}</h4>

              <button onClick={(e) => addItemHandler(e, item)}>
                   Add to cart
              </button>
        </StyledItems>
        </div>
    // </Link>
  );
};

const mapDispatchToProps = dispatch => ({
  addItem: item => dispatch(addItems(item))
});

export default connect(
  null,
  mapDispatchToProps
)(FetchData);

Consider using react redux hooks for a simpler API useDispatch

TypeError: Cannot read properties of undefined (reading 'preventDefault!!')

1 Answers1