Create objects with map function, currentValue as a object key

Question

In my ReactApp, I keep in state list of users (fetched from backend API). It is called "currentUsers".

class Lobby extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentUsers: ["TestUser1", "TestUser2"],
            buttonList: [],
        }
    }

I would like to populate buttonList to have array of object where array will look like this(example):

[{
"TestUser1": {
    "inviteButtonValue": "Invite",
    "chatButtonValue": "Chat"
          }
},
{"TestUser2": {
    "inviteButtonValue": "Invite",
    "chatButtonValue": "Chat"
          }
}]

There is my main function.

    produceButtonValues = (currentUsersList) => {
        let inputList = currentUsersList
            .map( (nickname) => {
                    return {
                        nickname: {
                            "inviteButtonValue": "Invite",
                            "chatButtonValue": "Chat"
                        }
                    };
                }
            );
        this.setState({buttonList: inputList});
    }

I tried to use map but it looks like I cannot get array element as object key, ie "TestUser1" etc. but got "nickname" instead (seen in "Components" tab in Firefox DevTools Add-on)

...
{nickname: {
    "inviteButtonValue": "Invite",
    "chatButtonValue": "Chat"
          }
}
...

I trigger my function as below:

    componentDidMount() {
        this.produceButtonValues(this.state.currentUsers);

How to solve it? By the way: when I run console.log(this.state.buttonList); just after setState , I still see empty array as it was made in initial state. Why?

Answer 1

It's called Property accessors

You use it like this:

currentUsersList.map(nickname => ({
    [nickname]: {
       inviteButtonValue: Invite,
       chatButtonValue: Chat
    }
});

Property Accessors
Computed property names

Answer 2

You are looking for this:

produceButtonValues = (currentUsersList) => {
        let inputList = currentUsersList
            .map( (nickname) => {
                    return {
                        [nickname]: {
                            "inviteButtonValue": "Invite",
                            "chatButtonValue": "Chat"
                        }
                    };
                }
            );
        this.setState({buttonList: inputList});
    }

To use a variable as the value of an object key you need to wrap it with []

Answer 3

You could make use of a string as key instead of a variable-name-key. In this case you can use a template-string to enforce the key for beeing a string

For Example:

produceButtonValues = (currentUsersList) => {
  let inputList = currentUsersList.map( nickname => {
    return {
      `${nickname}`: {
        "inviteButtonValue": "Invite",
        "chatButtonValue": "Chat"
      }
    };
  });

  this.setState({buttonList: inputList});
}