I have an avatar that shows the first letter of the user's first name. The list of user name es when the API call. If the API call not happened TypeError: Cannot read property 'charAt' of undefined error ing as there is no in put json. My react code as follows.

<Avatar
                    style={{ color: "#ffffff", backgroundColor: "#5e206e" }}
                  >
                    {item.user != null ? item.user.charAt(0) : "UU"}
                  </Avatar>

I have an avatar that shows the first letter of the user's first name. The list of user name es when the API call. If the API call not happened TypeError: Cannot read property 'charAt' of undefined error ing as there is no in put json. My react code as follows.

<Avatar
                    style={{ color: "#ffffff", backgroundColor: "#5e206e" }}
                  >
                    {item.user != null ? item.user.charAt(0) : "UU"}
                  </Avatar>

• javascript
• reactjs
• charat

1 Answer 1

User can still be undefined and throw error. I would also check first for user.

I suggest to use Optional Chaining introduced in ES2020.

<Avatar style={{ color: "#ffffff", backgroundColor: "#5e206e" }}>
    {item?.user ? item.user.charAt(0) : "UU"}
</Avatar>