News Articles conditional-statements

New to React, struggling to understand this bug: conditional message is not always displayed

probably a very noob problem that is keeping me busy since 3 days. I am building the classic memory card (One Piece Themed), I am trying to add a "Winning message" supposedly shown whenever all the cards have been matched. Thing is, for whatever reason, it works only when I have 3 (or less) couples, […]

JavaScript Syntaxt conditional syntaxt ? and

Often finding conditional syntax like array followed by "?" and "." and element, example – edges[0]?.node . How to interpret the code? export default function Index({ allPosts: { edges }, preview }) { const heroPost = edges[0]?.node; const morePosts = edges.slice(1); ….// rest of the code } Source: JavaSript – Stack Overflow

Why do I get these errors with my ternary operator?

This is what I get in the console: Unnecessary use of boolean literals in conditional expression no-unneeded-ternary. I’m just trying to do a ternary operator that validates the state of a game and only if the game has started and the user.role is equal with player I disable the button. I am using reactjs and […]

Conditional CSS Based on Being Viewed in Email or Internet Browser Client

I want CSS to conditionally apply a style to a client dependent on whether the HTML is being viewed in an internet browser or an email client. Is there a generic CSS condition statement to apply to all internet browsers? Something like: <!–[if gte mso 9]> but <!–[if chrome-ff-ie-opera-safari]>. Source: CSS – Stack Overflow

How do i write a conditional for the possibility of an empty array

I have a users list that im mapping over in a little side bar. Theres a possiblity that there can be no users. So I would like the side bar to say none if theres no users. I tried the below method but it seems like its still registering the user, even if its 0. […]

LESS CSS conditional not evaluating iscolor

I am trying to conditionally apply branding colors on our website using Less CSS variables, however I am having trouble getting LESS to evaluate the variables we have. @import (reference) ‘../../../../assets/styles/variables.less’; .content-container { background-color: if((iscolor(@branded-home-copy-color)), @branded-home-copy-color, @background-default); } I have also tried this without any luck: & when (iscolor(@branded-home-copy-color)) { background-color: @branded-home-copy-color; } & when […]

React; rendering components from an array depending on what tab im in

What I want my code to do I need to make tabs that display different components depends on the state My issue I don’t know how to render the correct component using a conditional depending on what tab I’m in with react What my code is doing so far I have an array of all […]

React condition rendering component typescript

I have a component called Visible with two props: condition and children the flow is if the condition is true the component will return the children(s) and if not it will return null (just like condition rendering), but VScode doesn’t recognized that what the condition is doing and throw an error for children (the variable […]

(HTML && JS) My program written for class is only returning "0" when it’s supposed to calculate a number based on order of clicks

I’m struggling with my beginners coding class hw and at this point I’m desperate. I’m trying to make a program that shows a series of five images, and asks the user if they see their number on it. if yes, it should add 1,2,4,8,16 (in that order; depending on the image shown)to the total number. […]

fetch different profile based on props condition react

in my app you log in with the user id, the app redirects you to your profile (fetched by a given api) every user has different authorization keys to perform the fetch, what i want to do is to change the API headers with the condition of the id I tried in different ways, if-else […]

Loop through local storage and if element exist just update it, if not add it to local storage

I am making a fake e-commerce site, where I am saving the products in local storage. I want to make a function where if I click the add to cart button, first it will check if the item already exists in the local storage, if yes just update it’s quantity property, if not push it […]

Is there a better way to conditionally render these BE responses on the FE? using react

I have a component that is mapping responses for an API call in my FE react component. The API response will look something like this : [ { time: ‘1:00pm’ status: ‘Success’ }, { time: ‘2:00pm’ status: ‘Failed: Invalid ID’ }, ] The issue I am facing is that status can have 7 different values […]

What does the ‘?’ mean in conditional rendering [duplicate]

I have a bunch of conditionals here. Is there any way to simplify this? Also, if you could, could you explain what the ‘?’ in ‘migrated.value?.user’ means? Thanks {migrated.value === null || migrated.value?.user === null ? null : migrated.user ?.migrated_to_new_login === null || migrated.user?.migrated_to_new_login === 0 ? null : ( <MigratedToNew passwordValue={passwordValue} setPasswordValue={setPasswordValue} /> )} […]

Conditionally applying css not working in React JS using Typescript

I have the following code whereas onclick I should make the Box stay highlighted with the black border. interface BigButtonProps { onClick(): void; Title: string; Description?: string; startIcon?: React.ElementType; } const BigButton: FC<BigButtonProps> = (props: BigButtonProps, { active }) => { const [isClicked, setClicked] = useState(false); const clickMe = () => { setClicked(!isClicked); console.log("say hello"); […]

How to use length of response data to display buttons conditionally – React

I am trying to use the length of response array for displaying buttons conditionally. I am able to get the length and display it inside paragraph tag as below. But while checking if index > {numRows}, it isn’t setting the value. Tried converting to integer like "index > Number.parseInt({numRows})" thinking it could be a string […]

vuejs 3 v-if and v-else

hey I am building an spa app with vuejs 3 and I am stuck with v-if and v-else not working as intended <div v-if="this.isScroll" @click = "toggleIsScroll" class ="spinner-container "> <i ref = "icon" class = "bi bi-pause-fill icon"> </i> <div ref="spinner" class ="spinner-border text-dark loader "> </div> </div> <div v-else @click = "toggleIsScroll" class […]

Trying to change the color of this "card" from highlighted when active to dark when inactive . Ternary operator not working

return ( <CardPadding> <Card { store.status ? ‘highlighted ‘ : ‘dark’} customStyle={styles.card}> <div className={styles.inner}> <h3 className={styles.heading}></h3> <p></p> <div className={styles.value}>{store.address}</div> <div className={styles.value}> {} {} <div className={styles.value3}> {‘ ‘} You have {store.totalActiveStoreCampaignsCount} active campaigns. </div> </div> </div> </Card> </CardPadding> ) } Source: React – Stack Overflow

How to check and list all false conditionals in if statement – JavaScript?

I’m trying to improve my code and have better logging. Is there an ideal way of how to tell which conditions are false in a list of conditionals? i.e) if(isAnimal && isCarnivore && isPlant){ // want to console.log all the false conditions } We could write let falseString = "" if (!isAnimal) { falseString = […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.