Show different

I am trying to show different HTML Elements depending on a ternary and I don’t know the proper syntax to it.

{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>
                }
}

I want to show when valuePro is true and when valuePro is false.

Answer

We can do that by actually picking up what component do we want to render:

const ButtonComponent = valuePro ? GenericButton : Button;

You also have common styles in there which u can extract for better readability here:

const calculatedStyles = { marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" };

Your code can look like this:

              <React.Fragment>
                <ButtonComponent 
                    secondary
                    onClick={triggerFileSelectPopup}
                    style={calculatedStyles}
                >
                    Change
                </ButtonComponent>
                <ButtonComponent 
                    onClick={onDownload}
                    style={calculatedStyles}>
                    Confirm
                </ButtonComponent>
              <React.Fragment>
}

Note that u can replace <React.Fragment></React.Fragment> with <></>