Estoy tratando de poner condiciones en el Botón, en mi componente. Tengo una condición booleana de mi colección de Firebase para lastRunStatus {cloundFunctions.lastRunStatus} y, si es cierto, era para permanecer verde y decir "Función de la nube" y si es falso, quiero que se vuelva rojo y diga "algo está mal".

Cualquier consejo, sugerencia o código sería muy apreciado :)

 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;