Here is a code of a search filter component where user can find products by typing letters inside the input field. I wonder which improvements can i add. I was thinking of removing some logic into custom hook, but don't…
in my (freshly setup) local bit.dev environment, my component wont render under the preview tab section. The preview seems to work in the "Compositions" section in the preview tab. Button Component Code import type { ReactNode } from 'react'; export…
I have a relatively simple React view, which currently causes an infinite loop to happen. I try to use useState where ever possible. Below is the code. it is the component AnvendelsesDisplay that is causing the issue, resulting in the…
I'm working on a layout that displays the educational qualification of a student. Here's the layout as per the prototype: The two TextButtons in the qualification-button class doesn't show the expected hover effect while the Add Educational Qualification button does,…
Being very new to React, I am having a hard time in passing the data across to other components from the parent component<App.js>. I am sharing the code below for reference. My goal is to pass the variable stocksName to…
I am trying to fetch data from the database and present them on the front-end page of a web application. When I click different fridge buttons, it always shows "No items found in this fridge." on my page. For the…
It isn't really a problem but I'm seeking some new understanding in React.useState(). The program below runs as expected however I am not sure if it's the correct way for performing my task. Task is to use React.useState(0) to add…
I have the following code. import Post from "../post/Post"; import "./posts.scss"; import {useQuery} from "@tanstack/react-query"; import {makeRequest} from "../../axios"; //omitted code here const {isLoading, error, data } = useQuery({ queryKey: ["posts"], queryFn: () => { makeRequest.get("/posts").then((res) => { return res.data;…
As shown in the Image, truncate happens for all the Category tag component. I want to ensure that only the last few tags will get truncate and if it get truncated to really small tags for instance C... then I…
I'm using the following code to store cart data into local storage "use client"; import React, { useState, useEffect } from "react"; export default function Home() { const [cartItems, setCartItems] = useState([]); useEffect(() => { const cartItemsData = JSON.parse(localStorage.getItem("cartItems")); if…