Динамический аватар с использованием пользовательского интерфейса материала и React

Question

У меня есть приложение для проверки основной формы.Сборка в реаги.js.Каждому пользователю назначается профиль с его информацией.Я хочу использовать первую букву его имени, скажем, Peter, P, и отобразить ее аватару с буквой p и случайным цветом.

React-Material-UI имеетпример, но я боюсь, что это только для статических аватаров.Я хочу, чтобы оно было динамичным.

Требования

Given that a user has a first name
And he is logged in
Then he should see a round random colored letter with his first name.

Answer 1

Если вы передали свой компонент некоторый user, который является объектом с атрибутом firstName, чтобы вы могли сделать что-то вроде user.firstName, вы могли бы сделать что-то вроде этого:

<Avatar className={classes.avatar}>{user.firstName.charAt(0)}</Avatar>

Где classes.avatar взято из примера Material-UI, на который вы ссылались выше.