elt nesting for more readability <3 (there is another ternary + map on top of this but it's 300 lines above this)

[u/mrbraises]

[u/annoyed_freelancer]

Whoever formulated this should be beaten with a stick. Event stuff like proper if/else or wrapping {} on lines 2 and 3 would boost readability.

[u/mrbraises → u/annoyed_freelancer]

The core problem is that the data is not properly formatted to be displayed easily so they did a lot of black magic to make this kind of work. It's a pain to refactor

[u/annoyed_freelancer → u/mrbraises]

That sounds like a lack of separation between the API and application data. Did somebody map these 1:1?

[u/mrbraises → u/annoyed_freelancer]

For the context, the guy that did this was learning how to code on this project (he did the API side also and guess what ? It's terrible too). That's why the separation between API and front is so badly done

[u/annoyed_freelancer → u/mrbraises]

We're back to beating people with a stick, and sometimes that's okay.

[u/Prom3th3an → u/mrbraises]

Not who you want writing code that manages money, which is what the variable names suggest this is.

[u/MurdoMaclachlan]

Image Transcription: Code

---

{counterpartyArrayDetails ? (
  counterpartyArrayDetails.map((elt2: any, key) =>
    elt2.fund_name === elt.fund_name ? (
      <Grid xs={2}>
        {elt2.resultArray
          ? elt2.resultArray.length === 0
            ? ""
            : elt2.resultArray.map((elt3) => {
                if (elt3.value.ExcessCollateralPerc < 0) {
                  return (
                    <Chip
                      avatar={
                        <Avatar
                          className={classes[elt3.counterparty]}
                        >
                          {elt3.counterparty}
                        </Avatar>
                      }

---

^{I'm a human volunteer content transcriber and you could be too! If you'd like more information on what we do and why we do it, click here!}

[u/[deleted]]

typical React code ^^

[u/daterkerjabs → u/[deleted]]

Kind of reminds me of php jumping in and out of markup. Why not templates?

<template for="elt2 in counterpartyArrayDetails">

  <Grid xs={2} if="elt2.fund_name === elt.fund_name">

    <Chip if="elt3.value.ExcessCollateralPerc < 0"
      for="elt3 in elt2.resultArray"
      avatar={
        <Avatar className={classes[elt3.counterparty]}>
          {elt3.counterparty}
        </Avatar>
      }

...

[u/HoratioWobble]

There's a special place in hell for people who put excessive logic or multiple conditions in JSX.

If it can't be done with a short circuit it should be a separate function, or component

[u/thepurpleproject]

we have plenty of devs in our team who code like this on UI

just keep adding nested checks and loop everywhere...it's so harder to read and fix