名字和姓氏缩写的建议 React hooks

Question

I was wondering if you can help me solve this bug. What I am looking for: if the organization name is one word then I want the first and second indices(ie Game = GA). And if the organization name is two or three names I want to return First and Second word initials (ie First Response == FR, or First Response Academy == FR. (The initials go inside of the Picture )

Here are some pictures of my the issue

export const getInitials = (firstName, lastName) => {
  return firstName.charAt(0).toUpperCase() + lastName.charAt(0).toUpperCase();
};

 const renderProfileData = () => {
    let firstName, lastName;
    if (!organization) {
      return <p>Loading...</p>;
    } else {
      const needHelp = Object.values(needs).some((val) => val === true);
      const offerHelp = Object.values(objectives).some((val) => val === true);
      const { address } = location;
      const nameArr = name.split(" ");
      if (nameArr.length < 2) {
        firstName = nameArr[0];
        lastName = firstName.split("").pop();
      } else {
        firstName = nameArr[0];
        lastName = nameArr[1];
      }
      return (
        <>
          <UserInfoContainer>
            {isOwner && <EditIcon src={edit} onClick={() => setDrawer(true)} />}
            <ProfilePic
              noPic={true}
              initials={getInitials(firstName, lastName)}
            />
            <UserInfoDesktop>

Answer 1

This example expects the string to be normalized with a capital first letter for each word (First Response Academy):

 // const name = ["First", "Last"].join(""); (if the name comes in an array) const fullName = "First Response Academy"; const name = "First Response"; const firstName = "First"; const denormalized = "fIrStNaMe LastName"; const toInitials = str => str // strip off capital letters (example: "First Last" ==> "FL").replace(/[^AZ]/g, "") // append the second character of the first word to end of this new string (example: "FL" ==> "FLI").concat(str.charAt(1).toUpperCase()) // limit this new string to 2 characters (example: "FLI" ==> "FL").substring(0, 2); [fullName, name, firstName, denormalized].forEach(w => { console.log(`${w}: ${toInitials(w)}`) });

---

The above example is brittle in that it expects the string to be normalized. If it's not, it'll fail, so you may want to use this example instead:

 const fullName = "fiRsT reSPoNsE AcAdEmY"; const name = "firsT responsE"; const firstName = "FirsT"; const normalized = "Firstname Lastname"; const toInitials = str => str // split string into array of strings (example: "fiRsT reSPoNsE AcAdEmY" ==> ["fiRsT", "reSPoNsE", "AcAdEmY"]).split(" ") // map over words and return a capitalized first letter of each word (example: ["fiRsT", "reSPoNsE", "AcAdEmY"] ==> ["F", "R", "A"]).map(c => c.charAt(0).toUpperCase()) // join letters to single string (example: ["F", "R", "A"] ==> "FRA").join("") // append second letter of first word to this new string (example: "FRA" ==> "FRAI").concat(str.charAt(1).toUpperCase()) // limit this new string to 2 characters (example: "FRAI" ==> "FR").substring(0, 2); [fullName, name, firstName, normalized].forEach(w => { console.log(`${w}: ${toInitials(w)}`) });

Answer 2

The javascript pop() method removes and returns the last element in the array, since you want the second one, you can simply access it through its index which is 1 :

lastName = firstName.split("")[1];