0
146
ViewsHow do I remove the undefined?
If the user does not have a first, middle, or last name, it will show an undefined. How can I remove the underline but instead I will put a saying that it they need to click this link to update their profile
import { useSelector } from "react-redux";
const mapState = ({ user }) => ({
currentUser: user.currentUser,
});
const Settings = () => {
const { currentUser } = useSelector(mapState);
const name =
currentUser?.firstName +
" " +
currentUser?.middleName +
" " +
currentUser?.lastName;
return (
<>
<Typography>Hello, {name}</Typography>
</>
);
};
export default Settings;
·
Juan Pablo Isaza
3 answers
Answer question0
import { useSelector } from "react-redux";
const mapState = ({ user }) => ({
currentUser: user.currentUser,
});
const Settings = () => {
const { currentUser } = useSelector(mapState);
const nameComponents = [
currentUser?.firstName,
currentUser?.middleName,
currentUser?.lastName
].filter(part => Boolean(part));
const name = nameComponents.join(" ")
return (
<>
<Typography>Hello, {name}</Typography>
{ nameComponents.length !== 3 && <button @click="...">
Fill lackink parts of your name
</button>}
</>
);
};
export default Settings;
·
Juan Pablo Isaza
Report
0
You can do a simple checking while rendering Typography component as below
return (
<>
{(
currentUser?.firstName &&
currentUser?.middleName &&
currentUser?.lastName
)
? <Typography>Hello, {name}</Typography>
: <div>whatever </div>
</>
);
·
Juan Pablo Isaza
Report
0
Map and/filter the values
Assuming currentUser ONLY has firstName, lastName and middleName
We need more testing if there are roles or addresse etc
const currentUser = { "firstName" : "John", "lastName": "Doe" }
const names = Object.values(currentUser).map(name => name || "");
console.log(names.join(" "))
console.log("Fullname?",names.filter(name => name).length >= 2)
// destructing is not useful here
// const { firstName, middleName, lastName} = currentUser
// console.log(firstName, middleName, lastName)
·
Juan Pablo Isaza
Report
Answer question