CODEWITHSUNDEEP
javascriptreactjs
paq
paq

Reputation: 117

How to make a variable constant name in React

I am trying to render profile icons with a single letter on the condition of the users first letter of their first name.

EX: sam = 'S'

I have created a const for each letter and would like to render them but I'm not sure how to apply the letter variable to the component.

Here is what my code is looking like.

function foo() {
var obj = JSON.parse(localStorage.getItem('user'));
let firstName = obj[0].firstName;
let letter = firstName.charAt(0).toUpperCase();
render ( <S /> )
}

const S = () =>
<span className="profile-icons" style={{'backgroundPosition': '0 -576px',}} />
...
A-Z

Upvotes: 0

Views: 1827

Answers (1)

Jae
Jae

Reputation: 556

You can simply implement it with props. Just be sure to give it a right styles.

const ProfileIcon = ({ letter }) => {
  return (
    <span className="profile-icons" style={{'backgroundPosition': '0 -576px',}}>
      {letter}
    </span>
  );
}
render (<ProfileIcon letter={letter} />)

reactjs.org/docs/components-and-props.html

Upvotes: 2

Related Questions