I am learning react.js and trying to implement basic add to cart functionality trying to keep it simple, just to understand the flow.
I have two cards, in one of them are listed the items, and after selecting the item and clicking the button the corresponding item should appear in the another card.
As far as I understand I need to somehow filter and check if the unique property has a match with the parameter, add to the card.
Please, find the Codesandbox link and the code below

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { styled } from "@mui/material/styles";
import React, { useState, useEffect } from "react";

const StyledBox = styled("div")({
  paddingRight: "70px",
  paddingLeft: "70px",
  boxShadow: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px",
  backgroundColor: "#FFFFFF",
  border: "1px solid black",
  minHeight: "200px"
});

const AddToCard = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((result) => setData(result))
      .catch((e) => console.log(e));
  }, []);

  
  const addToCardHandleClick = (id) => {
    setData(
      data.map((item: any) => {
        const tempItem = data.find((item: any) => item === id);
        if (!tempItem) return [...item, { id }];
      })
    );
  };



  return (
    <Card sx={{ maxWidth: 700, minHeight: "300px" }}>
      <CardContent>
        <Box
          sx={{
            display: "flex",
            gap: "30px",
            justifyContent: "center",
            overflow: "auto"
          }}
        >
          <StyledBox sx={{ minWidth: "100px" }}></StyledBox>//The selected item should appear here after clicking
          <Box
            sx={{
              alignSelf: "center",
              gap: "10px"
            }}
          >
            <Button
              variant="outlined"
           onClick={() => addToCardHandleClick(null)} //instead of null should be correct property
            >
              Move
            </Button>
          </Box>
          <StyledBox>
            {data &&
              data.map((item) => (
                <ul key={item.id} style={{ listStyle: "none" }}>
                  <li>{item.name}</li>
                </ul>
              ))}
          </StyledBox>
        </Box>
      </CardContent>
    </Card>
  );
};
export default AddToCard;

Any help will be appreciated

CodePudding user response：

I try it in the code sandbox: https://codesandbox.io/s/imgmediacard-material-demo-forked-9nq22

I use item.selected to keep track of clicked element and once you click on move I drop the item.selected property and add item.moved = true instead...

If you need to make the moved items appear in the right order, you can either:

• Add item.order = counter or item.order = Date.now() and sort all item.moved by item.order

• Use a separete array for moved items