401 questions
0
votes
1
answer
33
views
Next.js Build error: I have customize the fetch to retrieve token from both client and server
I have customized the fetch in a Next.js app to get the token whenever a request is made. This is the function:
import { getNewAccessToken } from "./getNewAccessToken";
import { cookies } ...
0
votes
0
answers
28
views
Render tooltip dynamically depending on the wrap attribute
I have this code:
<Tooltip
title={
<div>{Small description}</div>
}
>
<Stack>
<StyleOptionImage/>
<...
1
vote
1
answer
139
views
Filters and Sorting not retaining in AG GRID React on re-render
I can't copy the whole code here.
So I have a react component in which I am using 2 blocks of code (dashboard and details). I am conditionally rendering both block. Block 1 contains an AG grid react. ...
0
votes
1
answer
1k
views
React Native Modal Flickers Briefly Before Closing When Using Conditional Rendering
I am using a Modal in my React Native app to display address selection options. The modal works fine, but when I use conditional rendering to show dropdown fields based on selected values, the modal ...
1
vote
1
answer
34
views
Why do hidden elements change the size of vuetify select? (conditional rendering)
I have a vuetify select where I want to restrict the text when too many elements are selected.
So I used conditional rendering to just display what I want:
<v-col cols="auto">
<v-...
- 79
0
votes
0
answers
40
views
React Native Navigation: Conditional rendering and screen transitions in nested navigators
I'm experiencing layout jumps and abrupt transitions when conditionally rendering headers and tab bars in a deeply nested React Navigation structure. The issue occurs when navigating between screens ...
- 1
0
votes
1
answer
50
views
Conditional rendering of multiple tables in Vue.js
I'm building a Vue.js application that requires conditional rendering of multiple tables based on certain conditions. I have a set of flags that determine which tables should be rendered, and I'm ...
- 9
0
votes
1
answer
42
views
How do I activate a hidden div via a select form that is useState? [closed]
Please understand I am just learning....
can someone help modify the code so that when the ‘yes’ option is selected, a hidden part of the form is shown to allow additional completion?
I tried to do ...
-1
votes
2
answers
95
views
How to pass a component and state value in React to render conditional data based on user selection?
I am working on a React project where I have two components, UserRules (Component A) and UserEmail (Component B). I need to pass the value of a state variable selectedVoucherOption from Component A to ...
- 1,517
0
votes
1
answer
232
views
React: why is my conditionally rendered component not being rendered even though condition is being satisfied?
In React, have a parent component which conditionally renders the Output component based on whether there is a selected thread:
<div className="flex-grow overflow-y-auto p-4">
{...
- 1
1
vote
1
answer
37
views
Conditional Rendering of Controlled Components Giving a Blank Page When False
I've been working on my first React Project, a CV application where users can input their information and generate a CV. After the user submits the form, the form should disappear and the relevant ...
0
votes
0
answers
38
views
conditional rendering in react + firebase [duplicate]
I want my code to conditionally render some pages after authentication but the current problem I am facing is they are rendering even without authentication. A user can access the pages without ...
- 11
-1
votes
1
answer
270
views
React: How to check if a component returns anything or not ( using Javascript )
I'm using my components as below and I want to check if one of inner components is returning anything or not to make style decisions based on that.
<Grid xs={12} md={ Bar() ? 8 : 12 }>
<Foo ...
- 117
0
votes
1
answer
47
views
how to keep constant variable on react rendering
i've got stuck in react problems.
I've create an online shop (front-end) website in react
const products = [
{ id: 1, name: "Oppo", price: 200, unit: 1, img: "oppo.jpg" },
{ id:...
0
votes
0
answers
75
views
React State Update Not Reflecting Immediately in Conditional Rendering
I am working on a React component where I need to select an item from a list and update the state with the selected item's ID. I then want to conditionally render the selected item. However, I am ...
0
votes
1
answer
29
views
Conditional rendering not working for flutter widgets
Inside the build method 👇🏽
Widget build(BuildContext context) {
final provider = Provider.of<StateProvider>(context, listen: false);
// Get the selected question details from the ...
0
votes
1
answer
127
views
Next.js conditional rendering on small screens
I'm using a custom hook to render different elements on the page based on the screen size.
Hovewer during rendering there is a delay because of the useEffect hook. Elements that are rendered ...
0
votes
1
answer
41
views
Unexpected behaviour when conditionally rendering the same input component with different defaultValue
NOTE: this question aims to understand why this code gives this behaviour, not what alternative code would give the desired one.
I have a custom component to represent a particular form field, and I ...
0
votes
1
answer
65
views
Input element is not displaying
In my React app, I am trying to create logic for how my input elements should be displayed. I used the window.innerWidth for different screen sizes, as is seen below:
<div className='Trends'>
...
- 121
0
votes
3
answers
81
views
Render React child component with conditional rendering and one general wrapping html element
I have a React component:
const Options = () => {
// Option logic
if (isOptionOne) {
return <OptionOne />;
}
if (isOptionTwo) {
return <OptionTwo />;
}
if (...
- 4,888
0
votes
2
answers
42
views
Re-rendering conditional buttons
This is for an interactive bible.
In the following code I have buttons that are being conditionally rendered based upon the buttons I previously clicked.
The code calls an API to retrieve the data.
...
- 1
-1
votes
1
answer
93
views
Is component duplication for responsive display in react a good idea?
I am trying to display a component called 'BillingInfo' on my checkoutpage in react . using tailwind css.
<Checkout>
//some complex layout
//container 1
<div >
/** other ...
- 170
1
vote
2
answers
80
views
Conditional styling not working as intended
Creating tabs always works well in React and this is working when opening in a browser, but the 'tabActive' styling is not removed when another tab gets clicked. 'tabActive' styling is getting applied ...
- 43
0
votes
1
answer
216
views
Javascript HTML conditional display table of rows looses table column alignment
Hello HTML/Javascript experts,
I need to render large tables (few hundred rows at least) in a browser.
In order to help navigating I want to turn on and off sub sets of the rows by check buttons in ...
- 78
2
votes
1
answer
2k
views
How conditionally add an HTML attribute to an element in Astro
I am using Astro and TypeScript.
How do I add conditionally an HTML attribute rel="noreferrer" to an element in Astro?
So when targetBlank = false it doesn't render rel attribute in the dom?
...
- 4,888
0
votes
1
answer
146
views
Conditionally render images which are meant to serve as only background elements for body so they don't add height on pages with too little content
I have some NextJS image components to the RootLayout of a NextJS component and gave them negative z-indexes and positioned them absolutely as some content is dynamic and I wanted them to be placed in ...
0
votes
1
answer
85
views
jsx conditional rendering won't update on state change
I want to conditionally render jsx in my AuthForm component and i'm having trouble specifically with the 'isPasscodeEntry' scenario.
My AuthForm component conditionally renders an input form based on ...
- 81
2
votes
2
answers
346
views
How can i display only my Register component in my React app
I have been trying to display the register component of my react app which comprises of register forms. However, I have not been able to succeed and the youtube videos are confusing me more. ...
- 121
0
votes
1
answer
41
views
React , when you add class remove other ones
I got a total of 3 conditions. When I add the class possible-links-cont-star-btn with the x.feature condition I want to remove the all other classes element have.
<Link
key={i}
onClick={() =>...
- 13
1
vote
2
answers
1k
views
Issue with Conditional Rendering in React Custom Component
I'm facing an issue with conditional rendering in a custom component in my React application. I've been working on creating a custom component for conditional rendering that renders content only when ...
- 103
0
votes
1
answer
97
views
Trying to display different value depending on other values in React
I have this conditional rendering
{livematchcard.event.status_name != "Ολοκληρώθηκε" ? "Τελικό"
: (livematchcard.event.sport_id == 4 ? (
...
- 19
0
votes
2
answers
83
views
Use both operators in conditional render React
I am trying to create a condition in order to render an error message in a React App.
This is my code {channel.length > 0 || sport.length > 0 && ref.current == true && <Error ...
- 19
0
votes
2
answers
1k
views
React derived state. Whats wrong with this code
Coming from angular, i would like to know what's wrong with this code. I've been told that i should use useMemo (for the fitlering part) and useRef (to store products).
I know how to do that, but i ...
0
votes
1
answer
618
views
Conditionally render an image or a video in React
so I have a form to let the user upload an image OR a video. Both fields have a default image.
I've tried different approaches to render whatever the user uploaded (image or video), but nothing has ...
- 11
1
vote
0
answers
60
views
Conditional Rendering on BottomTab Navigator not working
So what i am trying to do is that I am doing conditional rendering of my AccountStack and AuthStack on my AccountTab, now my AuthStack contains screens Welcome, Login and Otp and after entering the ...
- 21
0
votes
1
answer
829
views
The component in Nextjs flashes in conditional rendering
I want a component to render based on token is available or not - similar to the jwt localstorage authentication.
The issue i found that whenever I refresh the page when the token is available still ...
0
votes
1
answer
43
views
What is wrong with this React conditional rendering expression?
I had the below Reactjs snippet in our UI, which works fine now.
<Select
label="Send To"
labelId="send-to-label"
...
- 21
-4
votes
1
answer
672
views
"JSX element 'div' has no corresponding closing tag." [closed]
I got an error message when I tried to run the code:
"JSX element 'div' has no corresponding closing tag."
I was trying to learn conditional loading message.
return (
<div className=&...
0
votes
1
answer
392
views
I am not getting data from api after refreshing the web page in next.js
I am working on a project, where I am using conditional rendering. I am not sure what the cause but I am not getting data from api after refreshing the page.
Image of the page on first load
Image ...
- 17
3
votes
3
answers
99
views
React: How to use conditional render and react-hooks to update another component's state?
I'm new to React. I'm trying to create a Login/Register Screen. I have three components called Login, Register and SlidingCard. I render these componenets on other jsx file called Screen. In ...
0
votes
0
answers
21
views
How to change my react webpage according to the button I am pressing on a static webpage?
I am basically creating an online game .I have set up an Express server which till now served static webpages . Now , I have static webpage which has two buttons 'Create Game' and 'Join Game'. Now, ...
0
votes
2
answers
656
views
What's the proper way to render a single element of an array in Svelte?
I have an array of nodes, which in my case are objects that have some data, including an id. I only want to display the active node, which is found by comparing the node ID with the active node ID. I ...
- 26.2k
1
vote
1
answer
28
views
VueJS Conditional rendering with v-show and json
I'm building a portfolio with VueJs and would display projects with selected tags.
Here is my code:
<script lang="ts">
import projectsData from "../projects.json"
export ...
- 31
1
vote
0
answers
85
views
Conditional render of super index with react
I'm having a hard time trying to achieve this approach:
I have to add a super index number only in some list items depending on their ID.
What I is when product with id 198940 and 20084 both exist ...
0
votes
1
answer
165
views
Why is react-nestable rendering [object Object] instead of expected JSX?
I am trying to render custom JSX snippets based on the objects stored in an array in using react nestable. But instead of the JSX snippet, [object Object] gets rendered on the screen. Here is my code
/...
0
votes
1
answer
73
views
Can i render a react context this way?
Currently I have a context to return the verification status of a given user. This context is wrapping all the App.
I have one UnAuthStatusProvider:
const UnAuthStatusProvider:FC = ({ children }) =>...
- 264
0
votes
2
answers
52
views
Cannot render third react component using conditional rendering
import React, { useState } from 'react'
const LoginPage = () => {
const [isLogin, setIsLogin] = useState(true);
const [isSignUp, setIsSignUp] = useState(true);
const [isAdmin, ...
1
vote
1
answer
112
views
Is there a possible way to have conditional rendering inside of flatlist in react native?
In the below flatlist the values of event.Tr1C2 may come as undefined in response
I would like to display the whole text component only if the value is not undefined and would like to hide the ...
- 21
2
votes
0
answers
187
views
React - Loading images in conditional rendering - performance issue
I have a React application in which after clicking on the buttons I change the categories and each category has its own layout with text and images.
The problem is that I conditionally render this ...
- 21
1
vote
1
answer
61
views
Getting problem in conditional rendering using key
I am trying to render option in code with disable and without disable using key of map and a value of user data but getting error in my console that unexpected token at key>user.col
help me to ...
