How to dynamically create an array of buttons in React using MonogoDB?

Im trying to convert my static product configurator into a dynamic one using the MERN stack, and I am really close to being done with the test version finally! I have everything working, but I am having trouble making it even more dynamic. In my configurator here for example, I have the ability to change colors through a list of hard coded buttons that trigger an event. This gets tedious with the amount of products that I will be trying to deploy to our website, and some products are only available in one, two, or three materials. I have successfully uploaded an array to MongoDB and is structured like so: How to dynamically create an array of buttons in React using MonogoDB?How to dynamically create an array of buttons in React using MonogoDB?How to dynamically create an array of buttons in React using MonogoDB?

map function not rendering jsx? Error: Objects are not valid as a React child

I’m working on the comments feature of my assignment. I’m trying to display the author name of the comments from my object. However, my map function doesnt seem to be working as whenever I click the button I get an error saying Error: Objects are not valid as a React child (found: object with keys {roles, _id, username, email, password, __v}). If you meant to render a collection of children, use an array instead.