I am trying to build searchlist for the searchbar and the list should be change color when cursor is placed their and got selected when clicked from list of item shown.

searchlist.jsx:

import React from 'react'
import { FaSearch } from 'react-icons/fa';
import './SearchList.css';

function SearchList({TitleArray,setSearchQuery}) {
  return (
   <>
    <div className="Container_SearchList">
    {
            TitleArray.map(m=>{
                return   <p
                key={m}
                onClick={e=>setSearchQuery(m)}
                className='titleItem'> 
               <FaSearch/>
            {m}
            </p>  
          })
      
        }   
    </div>
    </>
  )
}

export default SearchList;

searchlist.css:

.Container_SearchList {
    background-color: white;
    width: 90.75%;
    position: absolute;
    top:2.7rem;
    height: fit-content;
    z-index: 91;
}

.titleItem {
    margin: 0;
    padding: 0.5rem;
    cursor: pointer;
}

.titleItem div p:hover {
    background-color: rgba(166,202,234,0.516);
}

enter image description here

When cursor is placed on the name, the color should change and the name should get selected

When i create new fresh Next.js app and use JavaScript and open it using vs code, in .jsx files, suggestions not working as shown in the image, the props suggestions of any component not showing. Vs code Suggestions not working When i write "className" it does not work But when i create it and use TypeScript it works.

I deleted all settings.json file and reset all vs code settings but i doesn't work.

I have a react component that is greyed out in VSCode. It's my main App function (App.jsx), here:

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/admin" element={<Admin />} />
        <Route path="/checkout" element={<Checkout />} />
      </Routes>
    </>
  );
}

export default App;

I have another file, main.jsx, that is also greyed out:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

I really don't know where I went wrong. Everything was fine before, I can't even remember what I did.

Some context: I used vite, installed Flowbite and tailwind

(i'm new to react btw) So i'm trying to make a code that:

1. Reads the value of two select boxes and an input
2. Uses the value of the selects to read a Javascript object
3. Multiplies the value of the input by the value from the object.

This is what I've got to so far:

const valores = {
  longitud: {
    metros: {
      val: 1,
    },
    centímetros: {
      val: 0.01,
    },
  fuerza: {
    newtons: {
      val: 1,
    },
    dina: {
      val: 0.0000001,
    },
  }
}
const [tipo, setTipo] = useState("longitud")
  const [uIn, setUIn] = useState("metros")
  const [val, setVal] = useState(0)
  const unidades = {
    longitud: [
      "metros",
      "centímetros",
    ],
    fuerza: ["newtons", "dinas"],
  }
  return (
    <div>
      <select
        id="tipoMedida"
        value={tipo}
        onChange={e => setTipo(e.target.value)}
      >
        <option value="longitud">Longitud</option>
        <option value="fuerza">Fuerza</option>
        
      </select>

      <input type="number" id="valor" value={val}
        onChange={e => setVal(e.target.value)}/>

      <select id="unidadOrigen" value={uIn}
        onChange={e => setUIn(e.target.value)}>
        {unidades[tipo].map(u => {
          return <option value={u}>{u}</option>
        })}
      </select>

This part works fine. However, I'm not sure how to do the next one. I want to show a text that shows the result, for which i did this <div id="resultado">El resultado es {val*valores[tipo[uIn[val]]]}</div>but it shows nothing, and {val*valores[tipo[uIn.val]]} says uIn is undefined. Is something wrong with my code, and if not how could I achive that result?

My IDE is nvim im using nvchad nvim as the config file. in that when i save my .jsx file it doesn't auto indent the code. but in mean time there are .js files where auto indenting is happening.

Now it is no time for me to convert to ts or js can anyone help me

My jsx code

import React from "react";
import { getRoles } from "../../../utils/api";
import { Box } from "@mui/material";

const AdminRoles = () => {
  console.log('test');
  React.useEffect(() => {
    (async() => {
      console.log('test2');
      const response = await getRoles();

      console.log('response ', response)
    })()
  }, []);

  return <Box
    sx={{
          display: 'flex',
          flexWrap: 'wrap',
          '& > :not(style)': {
            m: 1,
            width: 128,
            height: 128,
          },
        }}>AdminRoles</Box>;
};

export default AdminRoles;

My plugins.lua file

local overrides = require "custom.configs.overrides"

---@type NvPluginSpec[]
local plugins = {

  -- Override plugin definition options

  {
    "neovim/nvim-lspconfig",
    -- dependencies = {
    --   -- format & linting
    --   {
    --     "jose-elias-alvarez/null-ls.nvim",
    --     config = function()
    --       require "custom.configs.null-ls"
    --     end,
    --   },
    -- },
    config = function()
      require "plugins.configs.lspconfig"
      require "custom.configs.lspconfig"
    end, -- Override to setup mason-lspconfig
  },

  -- override plugin configs
  {
    "williamboman/mason.nvim",
    opts = overrides.mason,
  },

  {
    "nvim-treesitter/nvim-treesitter",
    opts = overrides.treesitter,
  },

  {
    "nvim-tree/nvim-tree.lua",
    opts = overrides.nvimtree,
  },

  -- Install a plugin
  {
    "max397574/better-escape.nvim",
    event = "InsertEnter",
    config = function()
      require("better_escape").setup()
    end,
  },

  {
    "rcarriga/nvim-dap-ui",
    event = "VeryLazy",
    dependencies = "mfussenegger/nvim-dap",
    config = function()
      local dap = require("dap")
      local dapui = require("dapui")
      require("dapui").setup()
      dap.listeners.after.event_initialized["dapui_config"] = function()
        dapui.open()
      end
      dap.listeners.before.event_terminated["dapui_config"] = function()
        dapui.close()
      end
      dap.listeners.before.event_exited["dapui_config"] = function()
        dapui.close()
      end
    end
  },
  {
    "mfussenegger/nvim-dap",
    config = function()
      require "custom.configs.dap"
      require("core.utils").load_mappings("dap")
    end
  },

  {
    "mhartington/formatter.nvim",
    event = "VeryLazy",
    opts = function()
      return require "custom.configs.formatter"
    end
  },
  {
    "mfussenegger/nvim-lint",
    event = "VeryLazy",
    config = function()
      require "custom.configs.lint"
    end
  },
  {
    "maxmellon/vim-jsx-pretty"
  }
  -- To make a plugin not be loaded
  -- {
  --   "NvChad/nvim-colorizer.lua",
  --   enabled = false
  -- },

  -- All NvChad plugins are lazy-loaded by default
  -- For a plugin to be loaded, you will need to set either `ft`, `cmd`, `keys`, `event`, or set `lazy = false`
  -- If you want a plugin to load on startup, add `lazy = false` to a plugin spec, for example
  -- {
  --   "mg979/vim-visual-multi",
  --   lazy = false,
  -- }
}

return plugins

Mason languageservers

M.mason = {
  ensure_installed = {
    -- lua stuff
    "lua-language-server",
    "eslint-lsp",
    "stylua",

    -- web dev stuffs
    "css-lsp",
    "html-lsp",
    "typescript-language-server",
    "deno",
    "prettier",

    -- c/cpp stuff
    "clangd",
    "clang-format",
    "js-debug-adapter",
    "javascriptreact",
  },
}

any help why?

I'm creating a suggested events component. I want to render 4 randoms items from inside of an array of objects. It works for a split second, displaying 4 random items, but then it re-loads another 4 items, giving me 2 errors:

Error: Text content does not match server-rendered HTML.

Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.

export function SuggestedEvents() {
  function getMultipleRandom(
    posts: {
      id: number
      title: string
      description: string
      image: string
      date: string
    }[],
    num: number | undefined
  ) {
    const shuffled = [...posts].sort(() => 0.5 - Math.random())

    return shuffled.slice(0, num)
  }

  return (
    <section className="py-6 lg:py-10">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4">
        {getMultipleRandom(posts, 4).map((item) => (
          <Link href={`/browse/${item.id}`} key={item.id}>
            <EventCard
              title={item.title}
              description={item.description}
              image={item.image}
              date={item.date}
              key={item.id}
            />
          </Link>
        ))}
      </div>
    </section>
  )
}

const posts = [
  {
    id: 1,
    title: "This is a really cool title btw",
    description:
      "This is a really cool title btw and everyone likes it a lot. This is a really cool title btw.",
    image: "/images/1.jpeg",
    date: "01/11/2023",
  },
  {
    id: 2,
    title: "This is a really cool title btw",
    description:
      "This is a really cool title btw and everyone likes it a lot btw and everyone likes it a lot",
    image: "/images/2.jpeg",
    date: "01/11/2023",
  },
  {
    id: 3,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/3.jpeg",
    date: "01/11/2023",
  },
  {
    id: 4,
    title: "This is a really cool title btw",
    description:
      "This is a really cool title btw and everyone likes it a lot btw and everyone likes it a lot",
    image: "/images/4.jpeg",
    date: "01/11/2023",
  },
  {
    id: 5,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/5.jpeg",
    date: "01/11/2023",
  },
  {
    id: 6,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/6.jpeg",
    date: "01/11/2023",
  },
  {
    id: 7,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/7.jpeg",
    date: "01/11/2023",
  },
  {
    id: 8,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/8.jpeg",
    date: "01/11/2023",
  },
  {
    id: 9,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/9.jpeg",
    date: "01/11/2023",
  },
  {
    id: 10,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/10.jpeg",
    date: "01/11/2023",
  },

I think this comes from the .map running over all of my array items and not only with the 4 sliced items I want, but I'm unsure.

This mocked array at some point will come from an API of a lot of user posted content, so I would eventually grab a number of random posts from there.

How can I attach both style1 & style2 to the div below using the Emotion library?

const style1 = css`
  display: flex;
`

const style2 = css`
   width: 0;
`

const el= () => (
    <div css={style1}>
)

I had an older project (image slide) with "JS, Html and CSS" and I'm new to React. I wanted to know if I can use my existing JS script to recreate the project without rewriting it in jsx? I already have tried to implement my JS script into a react component like bellow:

import ny from './images/ny.jpg'
import ny1 from './images/ny1.jpg'
import ny2 from './images/ny2.jpg'
import ny3 from './images/ny3.jpg'
import ny4 from './images/ny4.jpg'
import nextBtn from './images/nextBtn.svg'
import prevBtn from './images/prevBtn.svg'
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = "./script/script.js";
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, []);

  return (
    <div className="carousel-container">
      <div className="carousel-slide">
        <img src={ny4} alt="" id="last-clone"/>
        <img src={ny} alt="" />
        <img src={ny1} alt="" />
        <img src={ny2} alt="" />
        <img src={ny3} alt="" />
        <img src={ny4} alt="" />
        <img src={ny} alt="" id="first-clone"/>
      </div>
      <button id="next-btn">
        <img src={prevBtn} alt="" />
      </button>
      <button id="pre-btn">
        <img src={nextBtn} alt="" />
      </button>
    </div>
  );
}

export default MyComponent;

But it throws an ERROR:

Uncaught SyntaxError: Unexpected token '<'

I know the problem is that the JS script can query the element from jsx with it's className.

This is my vanilla JS:

const carouselSlide = document.querySelector('.carousel-slide');
const carouselImage = document.querySelectorAll('.carousel-slide img');

const prevBtn = document.querySelector('#pre-btn');
const nextBtn = document.querySelector('#next-btn');

let counter = 1;
const size = carouselImage[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

nextBtn.addEventListener('click', () => {
    if (counter >= carouselImage.length - 1) return;
    carouselSlide.style.transition = 'transform 0.8s ease-in-out';
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});

prevBtn.addEventListener('click', () => {
    if (counter <= 0) return;
    carouselSlide.style.transition = 'transform 0.4s ease-in-out';
    counter--;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});

carouselSlide.addEventListener('transitionend', () => {
    if (carouselImage[counter].id === 'last-clone') {
        //you can delete this line to see the effect
        carouselSlide.style.transition = 'none'; 
        counter = carouselImage.length - 2;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
    if (carouselImage[counter].id === 'first-clone') {
        //you can delete this line to see the effect
        carouselSlide.style.transition = 'none'; 
        counter = carouselImage.length - counter;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
})

And here is the react App.js :

import './App.css';
import helmet, { Helmet } from 'react-helmet'
import MyComponent from './component'

function App() {
  return (
      <div className="App">
        <MyComponent/>
      </div>
  );
}

export default App;

And also I think there is something wrong with my image loading, correct me if it's wrong.

Tried to use old image carousel JS script in React and it back fired.

Consider the following React Component Tree:

<A>

  <B>
    <D>
      <E/>
    </D>
  </B>

  <C>
    <D>
      <E/>
    </D>
  </C>

</A>

A, B, C, D and E are all components. Components don't have a closing tag, but here I mean that A renders B and C, then D is rendered BY B and C components and so on.

I have a context (which is also a state variable) in A, disabledChildCtx initialized by a string "B". The context in its entire lifetime would just toggle between the values "B" and "C". This context here, is meant to disable some buttons in either B or C at a time according to value.

The component E uses the context and looks something like:

const E = () => {
  const ctxVal = useContext(disabledChildCtx);
  return <button disabled = {/*.... some logic ....*/}></button>
}

E just renders a button, which is either disabled or not depending upon some "logic". And the "logic" is, well:

1. For the E which is descendant of B, if the context value is "B" (disabledChildCtx), then the logic returns true, which disables the button in A -> B -> D -> E.
2. For the E which is descendant of C, if the context value is "C", then the logic returns true, which disables the button in A -> C -> D -> E.

The problem is both the Es get same context, how can they decide uniquely if to render or not a disabled button?

I'm creating JSX through loop and assigning it to the variable.

Here is the JSX

const viewItems = [];
documentItems.length && documentItems.forEach((d)=>{
    viewItems.push(
        <View style={styles.documentView}>
            <Text style={styles.documentText} onPress={() => Linking.openURL(d.customMetadata?.downloadUrl)}>
                {d.name}
            </Text>
        </View>
    )
})

Here is the css

documentView: { flex: 1, width: '100%', flexDirection: 'row', marginBottom:10, alignItems: 'flex-start'},
documentText: {color: 'blue', fontSize: 18}

Now when i'm printing the viewItems variable by console.log(viewItems) I got the following result, where Parent View that has styles.documentView css is printing fine but the child element Text css is turning into {[object]}

<View style={{"alignItems": "flex-start", "flex": 1, "flexDirection": "row", "marginBottom": 10, "width": "100%"}}>
    <Text onPress={[Function onPress]} style={[Object]}>ABC:</Text>
</View>
<View style={{"alignItems": "flex-start", "flex": 1, "flexDirection": "row", "marginBottom": 10, "width": "100%"}}>
    <Text onPress={[Function onPress]} style={[Object]}>XYZ:</Text>
</View>

I tried JSON.stringify(styles.documentText) and it printed this

<View style={{"alignItems": "flex-start", "flex": 1, "flexDirection": "row", "marginBottom": 10, "width": "100%"}}>
    <Text onPress={[Function onPress]} style="{\"color\":\"blue\",\"fontSize\":18}">ABC</Text>
</View>
<View style={{"alignItems": "flex-start", "flex": 1, "flexDirection": "row", "marginBottom": 10, "width": "100%"}}>
    <Text onPress={[Function onPress]} style="{\"color\":\"blue\",\"fontSize\":18}">XYZ</Text>
</View>

UPDATE 1:

I found pushing into array is creating the issue. When I tried to print the object before adding it to the array it prints well. Following is the code:

documentItems.length && documentItems.forEach((d)=>{
        const view = (
            <View style={styles.documentView}>
                <Text style={styles.documentText} onPress={() => Linking.openURL(d.customMetadata?.downloadUrl)}>{d.name}</Text>
            </View>
        );
        console.log(view) //printing fine
        if(key !== 'id'){
            viewItems.push(view);
        }
    })
console.log(viewItems) //printing only child elements style string as Object

Wondering what makes pushing items to the array is creating the issue.

I have some kind of a swipe functionality on list items in my React application. The swipe functionality is working, but somehow the right swipe function gets executed twice. I am not using React StrictMode, so that isn't the problem.

Here is my list item component simplified:

<Card 
        isPressable={!finished} 
        onClick={() => {
            handleClick(false);
        }}
        onTouchStart={(e) => {
            setTouchEnd(null);
            setTouchStart(e.targetTouches[0].clientX);
        }}
        onTouchMove={(e) => {
            setTouchEnd(e.targetTouches[0].clientX);
        }}
        onTouchEnd={() => {
            if (!touchStart || !touchEnd) return;
            const distance = touchStart - touchEnd;
            const isLeftSwipe = distance > minSwipeDistance;
            const isRightSwipe = distance < -minSwipeDistance;
            if(isLeftSwipe && finished) {
                handleLeftSwipe();
            }
            else if(isRightSwipe && !finished) { 
                handleRightSwipe(); 
            }
        }} 
        onContextMenu={() => handleClick(true)}

minSwipeDistance is a const: const minSwipeDistance = 50;

The onTouchEnd also executes twice when I swipe right. The handleSwipeRight function itself doesn't need to be debugged, because I literally exchanged it for only a console log and it was still being executed twice.

For the rest I am not doing anything special in my useEffects.

A listitem should not be able to be swiped left when the item is not finished and vice versa for finished items with right swipe.

My whole list Item component: (swipedRight state is only for CSS purposes)

import { Avatar, Card, Modal, Row, Text } from "@nextui-org/react";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { finishOrderRule, showToast, getOrderRule } from "../../utils/api.js";
import { useAuth } from "../../App.js";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faInfo } from "@fortawesome/free-solid-svg-icons";

export default function OrderRule(props){

    const [amountOfFields, setAmountOfFields] = useState(props.datafields?.length);
    const [finished, setFinished] = useState(props.data?.Finished);
    const [swipedLeft, setSwipedLeft] = useState(false);
    const [swipedRight, setSwipedRight] = useState(false);
    const [isOpen, setIsOpen] = useState(false);
    const [touchStart, setTouchStart] = useState(null);
    const [touchEnd, setTouchEnd] = useState(null);
    const [selected, setSelected] = useState(props.selected === props.data?.Oid);

    const order = props.order;
    const isAllRules = props.isAllRules;
    const rule = props.data;
    const datafields = props.datafields;
    const navigate = useNavigate();
    const { token } = useAuth();
    const minSwipeDistance = 50; 

    const noteField = {
        name: "Note", 
        type: "Regels", 
        label: "Notitie"
    }

    useEffect(() => {
        setSelected(props.selected === rule?.Oid);
    }, [props.selected]);

    useEffect(() => {
        setAmountOfFields(props.datafields.length);
    }, [props.datafields]);

    function getParts(fieldname, isOrderProperty){
        const parts = fieldname.split(".");
        if(parts.length === 1) return isOrderProperty ? order?.[fieldname] : rule?.[fieldname];
        else if (parts.length === 2) return isOrderProperty ? order?.[parts[0]]?.[parts[1]] : rule?.[parts[0]]?.[parts[1]];
    }

    function handleClick(long){
        if (long) navigate(`/orders/${order?.Oid}/${rule?.Oid}`, { state: rule, replace: false });
        else props.setSelectedRule(rule?.Oid);
    }

    function handleIconClick(e){
        e.stopPropagation();
        setIsOpen(true);
    }

    function handleRightSwipe(){
        console.log("right swipe");
        setSwipedRight(true);
        setFinished(true);
        finishOrderRule(rule?.Oid, true, token)
            .catch(error => {
                setFinished(false);
                if(error.statusCode === 401) {
                    showToast("Je moet opnieuw inloggen of je hebt geen rechten om deze actie uit te voeren.", error.statusCode);
                    navigate("/login");
                }
                else { 
                    showToast(error.message, error.statusCode)
                    console.log(error); 
                }
            })
            .finally(() => {
                getOrderRule(rule?.Oid, token)
                    .then((data) => {
                        props.modifyRule(data.value[0]);
                    })
                    .catch(error => {
                        setFinished(true);
                        if(error.statusCode === 401) {
                            showToast("Je moet opnieuw inloggen of je hebt geen rechten om deze actie uit te voeren.", error.statusCode);
                            navigate("/login");
                        }
                        else { 
                            showToast(error.message, error.statusCode)
                            console.log(error); 
                        }
                    })
                    .finally(() => {
                        setSwipedRight(false);
                        props.setSelectedRule(null);
                    });
            });
    }

    function handleLeftSwipe(){
        console.log("left swipe");
        setSwipedLeft(true);
        setFinished(false);
        finishOrderRule(rule?.Oid, false, token)
            .catch(error => {
                setFinished(true);
                if(error.statusCode === 401) {
                    showToast("Je moet opnieuw inloggen of je hebt geen rechten om deze actie uit te voeren.", error.statusCode);
                    navigate("/login");
                }
                else { 
                    showToast(error.message, error.statusCode)
                    console.log(error); 
                }
            })
            .finally(() => {
                setSwipedLeft(false);
                getOrderRule(rule?.Oid, token)
                    .then((data) => {
                        props.modifyRule(data.value[0]);
                    })
                    .catch(error => {
                        setFinished(true);
                        if(error.statusCode === 401) {
                            showToast("Je moet opnieuw inloggen of je hebt geen rechten om deze actie uit te voeren.", error.statusCode);
                            navigate("/login");
                        }
                        else { 
                            showToast(error.message, error.statusCode)
                            console.log(error); 
                        }
                    })
                    .finally(() => {});
            });
    }

    function isDate(fieldname){ return fieldname.toLowerCase().includes("date") }
    
    const ModalComponent = () => {
        return (
            <Modal css={{zIndex: 10, m: 10}} closeButton open={isOpen} onClose={() => { setIsOpen(false); }}>
                <Modal.Header css={{p: 0}}><Text color="primary" size={26}>{rule?.Product?.Name}</Text></Modal.Header>
                <Modal.Body css={{p: 20, pt: 0}}>
                    <Text weight="medium" size={15} css={{textAlign: "center"}}>{rule?.Product?.Description}</Text>     
                    <Text weight="medium" size={15} css={{textAlign: "center"}}>{rule?.Note}</Text>     
                </Modal.Body>   
            </Modal>
        );
    }

    const NoteField = ({ width }) => {
        return (
            <div style={{pointerEvents: "none", width: width, display: "flex", justifyContent: "center", alignContent: "center"}}>
                {(rule?.Note !== null && 
                    <Avatar onClick={(e) => handleIconClick(e)} color={"white"} size="sm" css={{display: "flex", pointerEvents: "auto", border: "2px solid black", alignContent: "center", justifyContent: "center", justifyItems: "center", alignItems: "center"}} bordered icon={<FontAwesomeIcon icon={faInfo} />} />) || (
                    <Avatar color={"white"} size="sm" css={{border: "2px solid black", opacity: "10%"}} bordered icon={<FontAwesomeIcon icon={faInfo} />} />)}
            </div>
        );
    }

    const Field = ({ field }) => {
        const obj = field.type === "Orders" ? getParts(field.name, true) : getParts(field.name, false);
        const wi = ((100 / amountOfFields).toString() + "%").toString();
        return field.name === "Note" ? <NoteField width={wi} /> : <Text weight="medium" size={15} css={{pointerEvents: "none", width: wi, textAlign: "center", lineHeight: "100%"}}>{isDate(field.name) ? new Date(obj).toLocaleDateString().toString() : typeof(obj) === "boolean" ? (obj === true ? "Ja" : "Nee") : obj === "" ? "-" : obj === null ? "-" : obj}</Text>;
    }
    
    return (
        <Card 
            isPressable={!finished} 
            onClick={() => { handleClick(false); }}
            onTouchStart={(e) => {
                setTouchEnd(null);
                setTouchStart(e.targetTouches[0].clientX);
            }}
            onTouchMove={(e) => {
                setTouchEnd(e.targetTouches[0].clientX);
            }}
            onTouchEnd={() => {
                if (!touchStart || !touchEnd) return;
                const distance = touchStart - touchEnd;
                const isLeftSwipe = distance > minSwipeDistance;
                const isRightSwipe = distance < -minSwipeDistance;
                if(isLeftSwipe && finished) {
                    handleLeftSwipe();
                }
                if(isRightSwipe && !finished) { 
                    handleRightSwipe();
                }
            }} 
            onContextMenu={() => handleClick(true)}
            css={{p: "0px 10px 0px 10px", w: 'auto', m: "6.5px", h: "55px", justifyContent: "center"}}
            className={
                finished && swipedRight ? "listItem swipedRight finished" : 
                finished && swipedLeft ? "listItem swipedLeft finished" : 
                selected && swipedRight ? "listItem selected swipedRight" : 
                selected ? "listItem selected" : 
                swipedLeft ? "listItem swipedLeft" : 
                swipedRight ? "listItem swipedRight" : 
                finished ? "listItem finished" : 
                "listItem"
            }
        >
            <ModalComponent key="modal" />
            {isAllRules && <div style={selected ? {position: 'absolute', left: 2, top: -4.5} : {position: 'absolute', left: 5, top: -2.5}}><Text size={13} color="primary">{`Order ${order?.Number}`}</Text></div>}
            <Row justify="space-evenly" css={{alignItems: "center"}}>
                {datafields.map((field) => (
                    <Field key={field.name} field={field} />
                ))}
                <Field key="Notitie" field={noteField} />
            </Row>
        </Card>
    );
}