<p>I have the following code in React: </p> <pre class="brush:js;toolbar:false;">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, }, ] </pre> <p>I tried to make the code dynamic like this: </p> <pre class="brush:js;toolbar:false;">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, }] </pre> <p>Am I right? </p>

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

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