#How am I gonna pass Condition in my .map function?

37 messages · Page 1 of 1 (latest)

swift island
# 
{transaction.map((money: Bill, key: number) => (
          <ul className={classes.ul} key={key}>
            <li className={classes.li}>
              <span>{money.reason}</span><span>{money.amount}</span>
            </li>
          </ul>
        ))}
#

want to add more style on condition in li tag

#

is there any way?

#

How am I gonna pass Condition in my .map function?

pure tree
swift island
#

can you ckeck

#

this

# 
{transaction.map((money: Bill, key: number) => (
          <ul className={classes.ul} key={key}>
            if (money.amount = +amount) {
              <li className={cx(classes.li, classes.income)}>
                <span>{money.reason}</span><span>{money.amount}</span>
              </li>
            } else {
              <li className={cx(classes.li, classes.expanse)}>
                <span>{money.reason}</span><span>{money.amount}</span>
              </li>
            }
          </ul>
        ))}
#

the way I did is right or not

untold topaz
#

No

#

inside the If statement

#

You have a calculation.

#

It should be a condition;

if (condition) {
  //  block of code to be executed if the condition is true
}
#

What are you trying to achieve?

swift island
#

if (value = +value){border green} else {border red}

#

if value start with + operator
if value start with - operator

untold topaz
#

Ah

#

You wanna check if money.amount is negative or not

swift island
#

yup

untold topaz
#

if so, you want to give different classes to the element

swift island
#

yup'

untold topaz
#

Do you want me to write the code and explain it? Or would you rather have me go through every step with you?

swift island
#

I just wanna know how am I gonna pass condition in it

untold topaz
#

Okay

# 
{transaction.map((money: Bill, index: number) => (
    <ul className={classes.ul} key={index}>
        <li className={cx(classes.li, money.amount > 0 ? classes.income : classes.expanse )}>
            <span>{money.reason}</span><span>{money.amount}</span>
        </li>
    </ul>
))}
#

Inside the cx function I added

money.amount > 0 ? classes.income : classes.expanse
#

This is a javascript ternary operator used to shorten if statements

#

condition ? ifTrue : ifFalse

#

So the condition is money.amount > 0 this checks if it's higher than 0. So negative values will return false and positive will return true

#

So if money.amount is greater than 0, add classes.income. if not, add classes.expanse

#

Also, expanse needs to be expense

swift island
#

sorry and thank you

untold topaz
#

hahah no need to say sorry. I'm more than happy to help!

#

If you have any more questions or need any more help. Feel free to open a new question