三元运算符检查返回0，同时检查jsx react js

Question

    {!this.state.isOpen ? 
            (<Link to="" onClick={() => this.handleClick('j')}>Take a bow</Link> | 
            <Link to="" onClick={() => this.handleClick('r')}>Down</Link>  )
            : '' }

Why Link to shows me 0 when using multiple line if I use one component does work for me can you please elaborate me how this is working ?

Answer 1

You would need a React.Fragment or its short syntaxt <></> .

{
    !this.state.isOpen ?
    <>
        <Link to="" onClick={() => this.handleClick('j')}>Take a bow</Link>
        |
        <Link to="" onClick={() => this.handleClick('r')}>Down</Link>
    </>
    :
    null
}