How to conditional render in react within a loop in a functional component

Question

I know this question has been asked many times, I've looked through many stackoverflow posts but I can't seem to find the exact problem I'm facing. Below is the code:

<tbody>
        {ratioMetrics && Object.entries(metrics).map(([metric, metricReadable]) => (
          <tr key={metric}>
            <td>{ metricReadable }</td>
            {Object.entries(ratioMetrics).map(([key,value]) => (
              <td key={value[metric]}>{ value[metric] }</td>
              // <td key={value[metric]}>{ Intl.NumberFormat('en', { notation: 'compact' }).format(value[metric].toPrecision(4)) }</td>
            ))}
          </tr>
        ))}
</tbody>

Sometimes value[metric] can be null and so the line commented fails as I can't call toPrecision on something that is null. I therefore only want the commented line to render when value[metric] is not null and if it is null render the line above it instead. ie:

if not null:

<td key={value[metric]}>{ Intl.NumberFormat('en', { notation: 'compact' }).format(value[metric].toPrecision(4)) }</td>

if null:

<td key={value[metric]}>{ value[metric] }</td>

I tried the following but I don't think react likes the syntax because the loop already contains {}.

{Object.entries(ratioMetrics).map(([key,value]) => (
      {!value[metric] && <td key={value[metric]}> "" </td>}
      {value[metric] && <td key={value[metric]}>{ Intl.NumberFormat('en', { notation: 'compact' }).format(value[metric].toPrecision(4)) }</td>}
))}

So my question is how do I go about fixing this? Thank you.

Prasanna Dubey · Accepted Answer · 2023-01-03 05:10:49Z

2

Please try like this

{Object.entries(ratioMetrics).map((key,value) => (!value[metric] ? <td key={value[metric]}> "" </td> : <td key={value[metric]}>{ Intl.NumberFormat('en', { notation: 'compact' }).format(value[metric].toPrecision(4)) }</td>)}

answered Jan 3, 2023 at 5:10

Prasanna Dubey

912 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kennysliding Over a year ago

Thanks for your first contribution to Stackoverflow! Although the answer itself is correct, we encourage you to elaborate further by explaining what the code does.

Rizwan · Accepted Answer · 2023-01-03 06:42:45Z

You can use Nullish coalescing operator ??.

It returns the right-hand side of the operator if the left-hand side is null or undefined

For example.

const foo = null ?? 'default string';

So, you can do like this

{Object.entries(ratioMetrics).map(([key, value]) => (
  <td key={value[metric]}>
    {!value[metric] ??
      Intl.NumberFormat("en", { notation: "compact" }).format(
        value[metric].toPrecision(4)
      )}
  </td>
))}

Like this, you don't need a ternary operator, just ?? can do this

Complete code:

<tbody>
  {ratioMetrics &&
    Object.entries(metrics).map(([metric, metricReadable]) => (
      <tr key={metric}>
        <td>{metricReadable}</td>
        {Object.entries(ratioMetrics).map(([key, value]) => (
          <td key={value[metric]}>
            {!value[metric] ??
              Intl.NumberFormat("en", { notation: "compact" }).format(
                value[metric].toPrecision(4)
              )}
          </td>
        ))}
      </tr>
    ))}
</tbody>

Collectives™ on Stack Overflow

How to conditional render in react within a loop in a functional component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related