"Using React to implement dynamic variables"

Question

I have the following code in React:

const TABS = [
    {
        value: "Names",
        label: "Names",
        onclick: (obj) => {
            tabOnClick(obj.value);
        },
        selected: mainTabSelected,
    },
    {
        value: "Logs",
        label: "Logs",
        onclick: (obj) => {
            tabOnClick(obj.value);
        },
        selected: mainTabSelected,
    },
    {
        value: "Groups",
        label: "Groups",
        onclick: (obj) => {
            tabOnClick(obj.value);
        },
        selected: mainTabSelected,
    },
    {
        value: "Subscriptions",
        label: "Subscriptions",
        onclick: (obj) => {
            tabOnClick(obj.value);
        },
        selected: mainTabSelected,
    },
]

I tried to make the code dynamic like this:

const values ​​= ["Names","Logs","Groups","Subscriptions"];
const labels = ["Names","Logs","Groups","Subscriptions"];
const TABS = [
     {
         value: {values},
         label: {labels},
         onclick: (obj) => {
             tabOnClick(obj.value);
         },
         selected: mainTabSelected,
     }]

Am I right?

Answer 1

use:

const values = ["Names", "Logs", "Groups", "Subscriptions"];

const TABS = values.map((e, i) =>
    {
        return {
            value: e,
            label: e,
            onclick: (obj) => {
                tabOnClick(obj.value);
            },
            selected: mainTabSelected,
        }
    }
)

This will map each element on your values ​​array and inject a new object in the Tabs array for each tab.