Questions tagged [conditional-rendering]

Conditionally choose which jsf tags to convert to DOM

Conditional rendering is selectively choosing which jsf( or jsp) components will be translated to the DOM elements by the javax.faces.render.Renderer in jsf framework. All jsf components have attibute rendered which evaluates to boolean. Based on this boolean Renderer chooses to create or not create the dom with this particular element.

386 questions
2
votes
0 answers

React Spring useTransition doesn't animate smoothly with conditionally rendered components

I've been working on a small website using react and wanted to animate the mobile menu coming in and out of view on state change. I've heard that react-spring useTransition is perfect for this use case and have been trying to figure it out for the…
2
votes
2 answers

React Dynamically Import Images

In my React code, I want to display several images in my folder. I have about 100 images and I don't want to import all of the images in different import statements. I want to import them maybe with the index of the images. The below is what I…
Utku Demir
  • 373
  • 1
  • 6
  • 14
2
votes
1 answer

React how to make conditionally rendered navigation persist

I am in the process of learning React and am creating a React desktop app where the side-navigation must change depending on the user's current location (determined by standard navgation buttons in the App body). The application is accessible here:…
2
votes
1 answer

How to conditionally export values in a (CRA) React App

In my React (v17) app I would like to render API handlers differently depending on whether there is an process.env.REACT_APP_API_BASE defined. So something in effect like if (process.env.REACT_APP_API_BASE) { // use the actual API handler export…
Dave Sag
  • 13,266
  • 14
  • 86
  • 134
2
votes
1 answer

React router Link to conditionally render button

I have a button with an onclick that takes it to a function which displays an alert asking "are you sure". If the person clicks ok on the alert, I would like the link to go to a certain page. If they click cancel, I would like it to go to a…
2
votes
1 answer

Display buttons dependent on variable value in React Native

I am using the following code to display a 'Home' page with a button on it in React Native...it is functional without difficulty: import React, { useState } from 'react'; import { Button, Text, TextInput, View } from 'react-native'; import {…
Pangit
  • 564
  • 1
  • 7
  • 23
2
votes
1 answer

How to reset v-model after hiding input with conditional rendering

I have two inputs from which the first one is a switch and the second one is a text field which gets conditionally displayed if switch is set to true. In situation when user sets the switch to true and then enters something in the text box the v…
user4676307
  • 409
  • 8
  • 22
2
votes
3 answers

How to change order of rendering in a React map

I have a simple task and I feel the answer to this question is also simple. But for some reason I can't wrap my head around it. I'm supposed to get a list of questions from a database and display them on the site. This particular section is yes or…
2
votes
3 answers

Trying to conditional render react-fontawesome icon based on current state

I have a browser based game I am creating with React. The user will have lives that will decrease when a given event occurs. Lives are displayed to the player via 3 font-awesome heart icons. I am using react-fontawesome. Getting the icons to display…
biljohns
  • 33
  • 4
2
votes
2 answers

Conditional Rendering with React-semantic UI

I'm trying to render the React-Semantic UI Message and based on the condition I need to display Content or list based on the condition. Working code: const Message = ({icon, header, content, className, list}) => { if(Array.isArray(content)) { …
2
votes
2 answers

How can I conditionally render search results with ReactiveBase

I'm trying to conditionally render my Results component from within ReactiveBase, but every time I try to use a ternary operator it breaks the rendering. If I remove the ternary, results display. I'm using the component to display the…
2
votes
2 answers

Amchart HTML container not found (React)

EDIT 1 (initial): It appears that setState() callback isn't working the way I'd expect it to. For example: this.state = {table: true} this.setState({table: false}, ()=> console.log(this.state.table)); Will log out 'true', when I'd expect it to…
Luke Sikuade
  • 159
  • 1
  • 2
  • 11
2
votes
2 answers

How to map items from an object that are unique and not repeating

I am making an E-Commerce react native app and in the CART section of the app, I want every item added in a cart with the same ID (categoryID as you can see in the console) to render only once, but in my case if I add 3 items with same id in the…
2
votes
2 answers

How can I conditionally render elements with React and Firebase via map function?

My main objective is to conditionally render a "Create profile" button if the user does not have a profile in firebase, or an "Edit profile" button if the user has a profile. I am not having issues rendering the edit profile button. I am checking…
Dylan Prem
  • 174
  • 11
2
votes
1 answer

Conditional rendering of two different h:commandButton actions

Technology Used : JSF 2 Primefaces Problem statement : We have one drop down list as below - //render…
Atul
  • 1,560
  • 5
  • 30
  • 75