How to map a mapped const in another const React.js

Question

Ok so say I have 3 arrays like so:

import React from 'react';

const hello = ['hello', 'hi', 'sup'];
const bye = ['bye', 'goodbye', 'see ya'];
const names = ['john', 'bob', 'jill'];

Then let's say that I want to map each array like so:

const helloWorld = hello.map(helloCode => {
  return (
    <div>{helloCode}</div>
  );
});

const goodBye = bye.map(byeCode => {
  return (
    <div>{byeCode}</div>
  );
});

const allNames = names.map(nameCode => {
  return (
    <div>{nameCode}</div>
  );
});  

Now suppose that I want to take all three of those mapped functions and map them like so:

const all = [helloWorld, byeWorld, allNames];

const Everything = all.map(allCode => {
    return (
        <div>{allCode}</div>
    );
});  

How would I go about doing that because this way doesn't seem to work. I really just need answers in react. Anyways if anyone can help me figure this out it would be much appreciated. Thanks!

Answer 1

You can flatten the array like this

const all = [helloWorld, byeWorld, allNames];
const flattenedArray = [].concat.apply([], all)
// or use array destructuring
// const flattenedArray = [...helloWorld, ...byeWorld, ...allNames]
const Everything = flattenedArray.map(allCode => {
    return (
        <div>{allCode}</div>
    );
}); 

Answer 2

Your all is an array of arrays. To convert it to an array, spread the inner arrays

const all = [...helloWorld, ...byeWorld, ...allNames]; //all  is now an array

const Everything = all.map(allCode => {
    return (
        <div>{allCode}</div>
    );
});