CODEWITHSUNDEEP
javascriptreactjsreduxmaterial-ui
user10104341
user10104341

Reputation:

Dynamic Avatar using Material UI and React

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.

Upvotes: 0

Views: 2258

Answers (1)

tlm
tlm

Reputation: 1022

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.

Upvotes: 1

Related Questions