Каковы альтернативы использованию массива в качестве объекта?

Question

Здесь я использовал элементы управления как массив. Какие есть другие варианты передачи нескольких значений свойств, которые я использовал в этом массиве от 3 до 4 раз?

import React from "react";
import BuildControl from "./BuildControl";
import styles from "./BuildControls.module.css";

const controls = [
    { label: "Salad", type: "salad" },
    { label: "Bacon", type: "bacon" },
    { label: "Cheese", type: "cheese" },
    { label: "Meat", type: "meat" },
];

const  buildControls =(props)=>(
    <div className={styles.BuildControls}>
        {controls.map(cntrl => (
            <BuildControl key={cntrl.label} type={cntrl.label}/>
        ))}
    </div>
);

export default buildControls; 

Answer 1

Если я понимаю вашу проблему, это просто проблема стиля?

Можно сделать так:

const  buildControls =(props)=>(
 <div className={styles.BuildControls}>
    {controls.map(({ label }) => (
        <BuildControl key={label} type={label}/>
    ))}
 </div>
);

Вы распаковываете значение объекта прямо в параметрах функции