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, i.e. "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?

zb22 · Accepted Answer · 2020-10-22 08:27:21Z

4

It's called Property accessors

You use it like this:

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

Property Accessors
Computed property names

edited Oct 22, 2020 at 8:27

answered Oct 22, 2020 at 8:18

zb22

3,2413 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Iosif · Accepted Answer · 2020-10-22 08:14:38Z

0

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 []

answered Oct 22, 2020 at 8:14

Iosif

8224 silver badges15 bronze badges

Comments

Sandro Schaurer · Accepted Answer · 2020-10-22 08:17:53Z

0

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});
}

answered Oct 22, 2020 at 8:17

Sandro Schaurer

4174 silver badges13 bronze badges

Collectives™ on Stack Overflow

Create objects with map function, currentValue as a object key

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related