How do I perform a JS computation within a const in react?

Question

I am trying to render a React component that outputs content from an API endpoint.

I am successfully able to display the content, but now I want to add some computation to what is being displayed.

In this example, I want the Badge to be green success badge if the current object has a status of "Enabled", and I want the Badge to be a yellow warning badge if the current object has a status of "Paused".

It does not appear that I can simply use JavaScript here. Any ideas?

Thanks!

    const renderInformation = data.map((item) => (
    <Card
      key={item.id}
      title={item.name}
      actions={[{ content: "Details" }]}
    >
      <Card.Section>
        <Stack>
          if (item.status == 'enabled') { // <---- THIS IS WHERE I WANT TO USE AN IF STATEMENT
            <Badge status="success">Enabled</Badge>
          }
          if (item.status == 'paused') { // <---- THIS IS WHERE I WANT TO USE AN IF STATEMENT
            <Badge status="attention">Paused</Badge>
          }
        </Stack>
      </Card.Section>
    </Card>
  ));

Shen · Accepted Answer · 2021-04-06 08:15:04Z

1

You can use js with jsx, just add a {} around your js code. And better use expression than statement. so you code will look like below:

const renderInformation = data.map((item) => (
  <Card
    key={item.id}
    title={item.name}
    actions={[{ content: "Details" }]}
  >
    <Card.Section>
      <Stack>
        {item.status == 'enabled'&& <Badge status="success">Enabled</Badge>}
        {item.status == 'paused' && <Badge status="attention">Paused</Badge>}
      </Stack>
    </Card.Section>
  </Card>
));

answered Apr 6, 2021 at 8:15

Shen

2671 silver badge7 bronze badges

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

Comments

hellogoodnight · Accepted Answer · 2021-04-06 08:14:28Z

1

   const renderInformation = data.map((item) => (
    <Card
      key={item.id}
      title={item.name}
      actions={[{ content: "Details" }]}
    >
      <Card.Section>
        <Stack>
          {item.status == 'enabled' && <Badge status="success">Enabled</Badge> }
          {item.status == 'paused' && <Badge status="attention">Paused</Badge> }
        </Stack>
      </Card.Section>
    </Card>
  ));

answered Apr 6, 2021 at 8:14

hellogoodnight

2,1697 gold badges32 silver badges60 bronze badges

Collectives™ on Stack Overflow

How do I perform a JS computation within a const in react?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related