How to make a variable constant name in React

Question

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

Answer 1

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