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);
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