Estoy tratando de mostrar diferentes elementos HTML según un ternario y no conozco la sintaxis adecuada.
{valuePro ? { <Button className="proButton" secondary onClick={triggerFileSelectPopup} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }} > Change </Button> <Button className="proButton" onClick={onDownload} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}> Confirm </Button> } : { <GenericButton secondary onClick={triggerFileSelectPopup} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }} > Change </GenericButton> <GenericButton onClick={onDownload} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}> Confirm </GenericButton> } }Quiero mostrar cuándo valuePro es verdadero y cuándo valuePro es falso.
Envolver múltiples elementos anidados en un <> debería hacer que funcione si ese es el error con el que te encuentras.
{valuePro ? <> <Button className="proButton" secondary onClick={triggerFileSelectPopup} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }} > Change </Button> <Button className="proButton" onClick={onDownload} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}> Confirm </Button> </> : <> <GenericButton secondary onClick={triggerFileSelectPopup} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }} > Change </GenericButton> <GenericButton onClick={onDownload} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}> Confirm </GenericButton> </> }Podemos hacer eso eligiendo qué componente queremos renderizar:
const ButtonComponent = valuePro ? GenericButton : Button;También tiene estilos comunes allí que puede extraer para una mejor legibilidad aquí:
const calculatedStyles = { marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" };Su código puede verse así:
<React.Fragment> <ButtonComponent secondary onClick={triggerFileSelectPopup} style={calculatedStyles} > Change </ButtonComponent> <ButtonComponent onClick={onDownload} style={calculatedStyles}> Confirm </ButtonComponent> <React.Fragment> } Tenga en cuenta que puede reemplazar <React.Fragment></React.Fragment> con <></>
{valuePro ? <> <Button className="proButton" secondary onClick={triggerFileSelectPopup} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }} > Change </Button> <Button className="proButton" onClick={onDownload} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}> Confirm </Button> </> : <> <GenericButton secondary onClick={triggerFileSelectPopup} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }} > Change </GenericButton> <GenericButton onClick={onDownload} style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}> Confirm </GenericButton> </> }intente esto desde ternario si quiere obtener solo 1 elemento