CODEWITHSUNDEEP
javascripthtmlreactjswebfrontend
user9460641
user9460641

Reputation:

Displaying name initials instead of profile picture

I am trying to implement a profile picture option in a React JS frontend similar to what Google Plus/Gmail does. If there is no profile picture available then the first letters of the words in the name are extracted and dispalyed instead of a profile picture.

I have made the appropriate div and the CSS for displaying and the initials are getting extracted as well but aren't displayed. This image is a good example.

HTML:

<li className="nav-item">

                   <div id="container_acronym">
                     <div id="name_acronym">                        
                        {this.acronym_name(this.state.lead_details.customer_name)}
                     </div>
                    </div>                 
            </li>

CSS:

    #container_acronym {
    width: 90px;
    height: 90px;
    border-radius: 100px;
    background: #333;
  }
  #name_acronym {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 36px;
    line-height: 100px;
  }

JavaScript:

acronym_name(str){
    var regular_ex=/\b(\w)/g;
    var matches = str.match(regular_ex);
    var acronym = matches.join('');
    document.getElementById("name_acronym").innerHTML = acronym;
}

Upvotes: 1

Views: 2644

Answers (1)

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100195

you need to return the name from acronym_name(str) function instead of setting innerHTML, like:

...
acronym_name(str){
    var regular_ex=/\b(\w)/g;
    var matches = str.match(regular_ex);
    var acronym = matches.join('');
    //return the acronym
    return acronym;
}

Upvotes: 1

Related Questions