如何根据 Firebase 中的数据向按钮添加条件（颜色、文本）

Question

i am trying to put conditions on the Button, in my component. I have a Boolean condition from my Firebase collection for lastRunStatus {cloundFunctions.lastRunStatus} and if it's true i was it to stay green and say 'Cloud Function' and if its false i want it to turn red and say 'somethings wrong.

Any tips, pointers, or code would be highly appreciated:)

import "../../App";
import "semantic-ui-css/semantic.min.css";
import { Icon, Card, Button } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import React from "react";
import "semantic-ui-css/semantic.min.css";
import moment from "moment";

const Cards = ({ cloudFunction }) => {
  return (
    <Card color="green">
      <Card.Content>
        <Card.Header>{cloudFunction.id}</Card.Header>
      </Card.Content>
      <Card.Content extra>
        <Icon name="cog" /> Records: {cloudFunction.lastRunLoad}
        <br />
        <Icon name="cog" />
        {cloudFunction.lastRunMessage}
        <br />
        <Icon name="clock" /> Last Run:{" "}
        {moment(cloudFunction.lastRunTime.toDate().toString()).format(
          "DD/MM/YYYY HH:mm",
          true
        )}
        <br />
        <Icon name="angle double down" />
        Schedule: {cloudFunction.schedule}
      </Card.Content>
      <Card.Content extra>
        <div className="ui two buttons">
          <Button
            basic
            type="button"
            color="green"
            onClick={(e) => {
              e.preventDefault();
              window.open(cloudFunction.url.toString(), "_blank");
            }}
          >
            Cloud Function
          </Button>
        </div>
      </Card.Content>
    </Card>
  );
};

export default Cards;

Answer 1

Look at conditions in React. If I understand your correctly, you can do something like:

{cloundFunctions.lastRunStatus ? (
  <Button
    basic
    type="button"
    color="green"
    onClick={(e) => {
      e.preventDefault();
      window.open(cloudFunction.url.toString(), "_blank");
    }}
  >
    Cloud Function
  </Button>
) : (
  <div>Something's wrong</div>
)