score:0
{item.venue.price.tier === 1 && <span classname="percentage one"></span>}
if/else statements don't work in jsx, because of how the 'language' is designed to make calls / construct objects. this is how to achieve conditional rendering.
bear in mind also that you will also have to return just one element. so you will have to group the latter options like so:
<div>
<span classname="percentage one"></span>
<span classname="percentage two"></span>
<span classname="percentage three"></span>
<span classname="percentage four"></span>
</div>
score:0
the problem can be solved by extracting the section to a pure function that can return the set of <span>
as an array. here is a way to refactor your code:
const getpricetier = (tier = 0) => {
if (tier > 4) {
console.log('config only supports till "percentage four"');
}
const config = {
0: 'one',
1: 'two',
2: 'three',
3: 'four'
};
const items = array.from({ length: tier }, (v, i) => i);
// items = [0, 1, 2, tier - 1];
return items.map((i) => {
return <span classname={`percentage ${config[i]}`}></span>
})
}
and then in the render just use it as:
<div classname="bar">{getpricetier(item.venue.price.tier)}</div>
hope this helps!
score:0
to simplify your example you could use something like
const test = () => {
const arr = [1,2,3,4]
return (
<div>
{arr.map(e => {
return (
(e > 1) ?
<p key={e}>this is true {e}</p>
:
<p key={e}>this is false {-e}</p>
)
})}
</div>
)
}
score:1
you can use ternary operator
<div classname="bar">
{
item.venue.price.tier === 1?
<div> <span classname="percentage one"></span></div>
:item.venue.price.tier === 2?
<div> <span classname="percentage one"></span>
<span classname="percentage two"></div></span>
:item.venue.price.tier === 3 ?
<div> <span classname="percentage one"></span>
<span classname="percentage two"></span>
<span classname="percentage three">
</span></div>
:item.venue.price.tier === 4?
<div> <span classname="percentage one"></span>
<span classname="percentage two"></span>
<span classname="percentage three"></span>
<span classname="percentage four"></span> </div>
:''
}
</div>
Source: stackoverflow.com
Related Query
- Reactjs - Multiple if conditions inside map function
- "this" is undefined inside map function Reactjs
- How to map inside a map function in reactjs
- reactjs how to call method inside map function
- How to run map inside map function in Reactjs
- Reactjs condition inside map function
- How to map inside map function and show the data in Reactjs
- multiple conditional renderings inside a map function
- Use "this" pointer from inside map callback function using ReactJs
- Calling A Child Component Inside a Map Function In ReactJs
- How to set individual states to render components inside a map function in ReactJs
- ReactJS onClick event inside map function, then call parent's function
- if inside loop of reactjs element in map function
- Convert date inside map function of render in ReactJs
- reactjs - Function not working inside a map function
- reactJS - Unexpected token upon map inside a function
- ReactJS axios.post inside a map through array function that returns an object
- reactjs toggle enable/disable button inside map function
- ReactJs is not reading map function inside useEffect
- how to handle multiple refs inside a map function
- A modal inside a Map Function In ReactJs has error message
- ReactJS lifecycle method inside a function Component
- Assign a const variable inside a map function
- Function inside render and class in reactjs
- Reactjs how to use ref inside map function?
- How to loop inside map function using jsx format React JS
- why I can not use function keyword to define a function inside a reactjs class
- How to set a defaultChecked to only first input in radio button when using map function in reactjs
- React: Calling a function inside a map function
- How to update state in map function in reactjs
More Query from same tag
- Property 'initializeApp' does not exist on type 'typeof import(/././projectfolder/node_modules/firebase'
- Need to fill in form data from json data . Not showing up
- Apollo React - `useMutation` in ApolloClient setup?
- Override an @media for material-ui react componentd doesn't work
- Fail to compile ternary expression in React component render
- Open component with Onclick
- Jest encountered an unexpected token + react markdown
- Tailwind CSS unnecessary whitespace
- Why the module C does not receive the socket io "hi" event?
- React Hooks - setState takes two clicks before working
- react CRA - exclude debug code from build
- Remove an item from List - React Js
- Firebase get data from Firestore v9 react
- Reactjs can not be styled
- Cannot read properties of undefined (reading 'params') in BookingCar.js page
- How to allow express backend REST API to set cookie in a react frontend which is using axios?
- How to pass class name from parent to children component
- If I was mapping thru a collection, and placing buttons for each doc, how could I grab the docID from the button to its function?
- How to increment a cell in AG Grid React tabel?
- Set items to disabled or in active state based on active items list from api in React component
- How to get acces to a child useState in React?
- Jest simulate 'click' works quirky and test fails
- Redux in NextJS
- React/JSX - changing element type conditionally with minimal code duplication
- jsPDF saving the file without extension when sent to nodejs/expressjs server
- TypeError: Cannot read property 'version' of undefined at Dotenv.apply
- typescript how to simplify React.componentPropsWithoutRef
- bar chart not showing geting Error: "category" is not a registered scale
- How to assign a value to a specific object property in Array?
- React Redux <No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access>