JavaScript how to map over two arrays one object

Question

I do have an object which is containing some field, three of them are arrays. And I would like to map over them in one go.

Let me show how I am doing it right now:

containerNames = this.state.fileContent.xContainers.map(xContainer => <Container containerName={xContainer} />);

containerNames.push(this.state.fileContent.yContainers.map(yContainer => <Container containerName={yContainer} />));

containerNames.push(this.state.fileContent.zContainers.map(zContainer => <Container containerName={zContainer} />));

For me it does seems like it could be made differently. With one lambda?

Answer 1

The code in OP will make something like [1, 2, 3, [4, 5, 6], [7, 8, 9]], which I hope is not what you want. If you want [1, 2, 3, 4, 5, 6, 7, 8, 9], use this:

const containerNames = ["xContainers", "yContainers", "zContainers"].
    flatMap(field => this.state.fileContent[field].map(...));

If you want [[1, 2, 3], [4, 5, 6], [7, 8, 9]], then change the flatMap into map.