Ternary operator ? in Javascript is resolving backwards from expected

Question

I have the following React with Typescript component which is supposed to switch back and forth based on a user that has been authenticated via Firebase auth:

const Navigation = (authUser: any) => (
    <div>
        {console.log(authUser)}

        {authUser ? <NavigationAuth /> : <NavigationNonAuth /> }
        <h1>Navigation</h1>
    </div>
);

The component above it is App, and it's piping in the authUser property like so:

...
interface Props {
    firebase?: Firebase,
    listener?: any
}

interface State {
    authUser: any,
}

class App extends React.Component<Props, State> {
    listener: any;
    constructor(props: any) {
         super(props)

         this.state = {
              authUser: null
    }
}

componentDidMount() {
    this.listener = this.props.firebase?.auth.onAuthStateChanged(authUser => {
        authUser
        ? this.setState({ authUser })
        : this.setState({ authUser: null });
    });
}

componentWillUnmount() {
    this.listener();
}
render() {
    return(
    <Router>
        <div>
            <Navigation authUser={this.state.authUser}/>
            <hr />
            ...

Using the React developer tools I can see that authUser from the tools that authUser is coming in null because I haven't fired off any login actions, and yet even though the value is definitively null, it's still equating {authUser ? <NavigationAuth /> : <NavigationNonAuth /> } {authUser ? <NavigationAuth /> : <NavigationNonAuth /> } as true and rendering <NavigationAuth /> instead of `'

Is there something in my logic I'm missing here? Or some funky way the ternary operator works that I'm unaware of with null values? I would expect that if it's a null value the false result would render, unless the way I have it coded at the moment is somehow looking for any value other than some kind of undefined? Which null would count as? Because it's not undefined?

Stranger yet, if I define it explicitly, so the ternary operator is as so: {authUser != null ? <NavigationAuth /> : <NavigationNonAuth /> } {authUser != null ? <NavigationAuth /> : <NavigationNonAuth /> }

It STILL renders <NavigationAuth /> even though the value is null. What am I doing wrong?

Answer 1

I'm not familiar with TypeScript, but shouldn't it be props.authUser? In vanilla JS, I would write this:

const Navigation = ({authUser}) => (
    <div>
        {console.log(authUser)}

        {authUser ? <NavigationAuth /> : <NavigationNonAuth /> }
        <h1>Navigation</h1>
    </div>
);