Dynamic Avatar using Material UI and React

Question

I have a basic form validation app. Build in react.js. Each user is assigned a profile, with his information. I want to use the first letter of his name, let's say Peter , the P , and display it to an avatar, with the letter p and a random color.

React-Material-UI has an example but I am afraid it is only for static avatars. I want it to be dynamic.

Requirements

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

Assuming you passed your component some user that is an object with an attribute firstName so that you can do something like user.firstName you could do something like this:

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

Where classes.avatar is taken from the Material-UI example that you referenced above.