Estoy tratando de representar íconos de perfil con una sola letra en la condición de la primera letra de los usuarios de su nombre.
EJ: sam = 'S'
Creé una const para cada letra y me gustaría representarlas, pero no estoy seguro de cómo aplicar la variable de letra al componente.
Así es como se ve mi código.
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',}} /> ... AZSimplemente puede implementarlo con accesorios . Solo asegúrate de darle los estilos correctos.
const ProfileIcon = ({ letter }) => { return ( <span className="profile-icons" style={{'backgroundPosition': '0 -576px',}}> {letter} </span> ); } render (<ProfileIcon letter={letter} />)