Using a key property from object in TypeScript

Question

Here is a component:

import { useAppSelector } from "../../hooks";
import IUser from "../../models/user";

const Header: FC = () => {
    const [btn, setBtn] = useState(false);
    const user: IUser | null = useAppSelector( state => state.user );

    const btn_click = () => {
        setBtn(!btn);
    }
    console.log(user, "user"); // consoles.log( { _id: 2452345, name: "Eldar" } )

    return(
            <div>
            { user ? 
                <button className={ style.header__button } }> { user.name } </button> :
                <button className={ style.header__button } onClick={ () => btn_click() }> Reg </button> }
            { btn && <ModalWrapper>
                        <SignIn/>
                    </ModalWrapper> }
        </div>
    )
}

export default Header

Love typescript, but when I end up with those errors, drives me crazy. Basically depending on a user want to put this or that button. Therefore there is user ? then in a button where user is logged in I want to put users name, but it gives me error as

Property 'name' does not exist on type 'never'

It should work either way if there is a user or not, but even if there is a user gives me this error.

model user below

export default interface IUser {
    _id: string,
    name: string
}

Answer 1

The code below should work for you.

import { useAppSelector } from "../../hooks";
import IUser from "../../models/user";

const Header: FC = () => {
    const [btn, setBtn] = useState(false);
    const user: IUser | null = useAppSelector( state => state.user );

    const btn_click = () => {
        setBtn(!btn);
    }
    console.log(user, "user"); // consoles.log( { _id: 2452345, name: "Eldar" } )

    return(
            <div>
            { user ? 
                <button className={ style.header__button } }> { user?.name } </button> :
                <button className={ style.header__button } onClick={ () => btn_click() }> Reg </button> }
            { btn && <ModalWrapper>
                        <SignIn/>
                    </ModalWrapper> }
        </div>
    )
}

export default Header

This answer may give you more insight on why this is happening: https://stackoverflow.com/a/44147953/1485573