I have a form inside a list, that I submit by a function
Each item in the list, has a postId and a userId.
The postId and the userId is used in the input fields, in the form.
The problem
The problem is that No matter what index in the array I submit, it submits the last. Ex if I Try to submit postId 6, 7 and 10, it submits: 10, 10, 10
The List with the form, mapped out:
{posts?.map((post) => (
<div>
<PostCard
className="swipe"
key={post.id}
preventSwipe={["down"]}
onSwipe={onSwipe}
onCardLeftScreen={() => onCardLeftScreen(post.id)}
>
<Modal
open={toggleModal}
handleClose={handleToggleModal}
loading={loading}
>
<h3>Sådan {user.name}</h3>
<p>
Sælger har modtaget dit bud! Så snart sælger har
accepteret, trækker vi pengene fra din konto. Når dit køb
er sendt, sender vi pengene videre til sælger!
</p>
</Modal>
<h4 className="distance">60 kilometer</h4>
<h4 className="price">{post?.price} kr.</h4>
{/* LINK TO ADVERSE */}
<Link className="post_title" to={`/showpost/${post.id}`}>
{post.title}
</Link>
{/* FORM TO SUBMIT!! */}
<form id="liked" name="liked">
{/* GET THESE */}
<input name="postId" id="postId" defaultValue={post.id} />
<input
name="userId"
id="userId"
defaultValue={currentUser?.id}
/>
<button hidden type="submit" className="btn btn-primary">
LIKE
</button>
</form>
</PostCard>
</div>
))}
The function where i submit the form:
const onSwipe = (direction) => {
if (direction == "right") {
// if swipe right = add to bookmarks list
context.postBookmark(document.getElementById("liked"));
};
Full code for the component:
import React, {
useContext,
useEffect,
useState,
useCallback,
useRef,
} from "react";
import Loader from "react-loader-spinner";
import PostCard from "react-tinder-card";
import { Link } from "react-router-dom";
// Style
import "../../../styles/PostCards.css";
import "../../../styles/SwipeButtons.css";
// Context
import DbContext from "../../../context/DbContext";
// Icons
import ReplayIcon from "@material-ui/icons/Replay";
import CloseIcon from "@material-ui/icons/Close";
import StarRateIcon from "@material-ui/icons/StarRate";
import FavoriteIcon from "@material-ui/icons/Favorite";
import FlashOnIcon from "@material-ui/icons/FlashOn";
import { IconButton } from "@material-ui/core";
import Modal from "../../layout/modal/Modal";
const PostCards = (props) => {
const [posts, setPosts] = useState([]);
const [user, setUser] = useState([]);
const context = useContext(DbContext);
const [loading, setLoading] = useState(false);
const [currentUser, setCurrentUser] = useState([]);
const [toggleModal, setToggleModal] = useState(false);
const handleToggleModal = useCallback(() => {
setUser(context.getUser());
setToggleModal(!toggleModal);
});
useEffect(() => {
// if (context.existsUser() == null) {
// window.location.href = "/login";
// }
context.getPosts().then((r) => setPosts(r));
}, [context]);
useEffect(() => {
setCurrentUser(context.getUser());
}, [context.existsUser()]);
const onSwipe = (direction) => {
if (direction == "right") {
// if swipe right = add to bookmarks list
context.postBookmark(document.getElementById("liked"));
console.log("Interesseret!!!");
}
if (direction == "up") {
setToggleModal(true);
console.log(
"Venter på at sælger acceptere, hvorefter betalingen vil blive overført!!! :-)"
);
}
if (direction == "left") {
console.log("Moved to notinterested");
}
console.log("You swiped: " + direction);
};
const onCardLeftScreen = (myIdentifier) => {
console.log(myIdentifier + " left the screen");
};
return (
<>
<div>
{posts?.length > 0 ? (
<div className="postCards__cardContainer">
{posts?.map((post) => (
<div>
<PostCard
className="swipe"
key={post.id}
preventSwipe={["down"]}
onSwipe={onSwipe}
onCardLeftScreen={() => onCardLeftScreen(post.id)}
>
<Modal
open={toggleModal}
handleClose={handleToggleModal}
loading={loading}
>
<img
src="API DATA"
alt="Accept_offer_image"
/>
<h3>Sådan {user.name}</h3>
<p>
Sælger har modtaget dit bud! Så snart sælger har
accepteret, trækker vi pengene fra din konto. Når dit køb
er sendt, sender vi pengene videre til sælger!
</p>
</Modal>
<div
style={{
backgroundImage: `url(API DATA${post?.images[0]?.url})`,
}}
className="card"
>
<h4 className="distance">60 kilometer</h4>
<h4 className="price">{post?.price} kr.</h4>
{/* LINK TO ADVERSE */}
<Link className="post_title" to={`/showpost/${post.id}`}>
{post.title}
</Link>
</div>
{/* FORM TO SUBMIT!! */}
<form id="liked" name="liked" ref={submitTest}>
{/* GET THESE */}
<input name="postId" id="postId" defaultValue=
{post.id} />
<input
name="userId"
id="userId"
defaultValue={currentUser?.id}
/>
<button hidden type="submit" className="btn btn-primary">
LIKE
</button>
</form>
</PostCard>
</div>
))}
</div>
) : (
<Loader
className="loader"
type="MutatingDots"
color="#052131"
secondaryColor="#909090"
height={100}
width={100}
timeout={3000} //3 secs
/>
)}
</div>
<div className="swipeButtons">
<IconButton className="swipeButtons__repeat">
<ReplayIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__left">
<CloseIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__star">
<StarRateIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__right">
<FavoriteIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__lightning">
<FlashOnIcon fontSize="large" />
</IconButton>
</div>
</>
);
};
export default PostCards;
The problem is you're giving same id to every Form. You need to give different ids eg <form id=`liked-${post.postId}` name="liked">
You can move the loop data into a separate file. It will give the submit form data instead of the last data. Please refer to the below link that has a similar scenario.
https://codesandbox.io/embed/heuristic-cookies-r9vfy?fontsize=14&hidenavigation=1&theme=dark
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.