How to use ternary operator for the jsx using react?

Question

i have code like below

const Parent = () => {
    return (
        {active && (
            <Button 
                onClick={doSomething}
                disabled={someConditionTrue}
            > Click </Button>
        )}
    );
}

as seen from above code, the Button component is displayed when active is true. now i want another Button compoennt within Tooltip to be displayed when active is true and isStatus is true. and i dont want the other ButtonComponent without Tooltip to be displayed when this is Tooltip button displayed. so i rewrite above code like below,

return (
    {active && isStatus && (
        <Tooltip>
            <Button onClick={doSomething} disabled>
                Click
            </Button>
        </Tooltip>
    )}
    {active && (
        <Button 
            onClick={doSomething}
            disabled={someConditionTrue}
        > Click </Button>
    )}
);

How can i rewrite above using ternary operator. could someone help me with this. thanks.

Answer 1

return (
    {active && isStatus ? (
        <Tooltip>
            <Button onClick={doSomething} disabled>
                Click
            </Button>
        </Tooltip>
    ): active && (
        <Button 
            onClick={doSomething}
            disabled={someConditionTrue}
        > Click </Button>
    )  }  
);