Как сделать шаблонный компонент в React/MUI, добавляя в ручную нужные данные

Question

Не понимаю как реализовать следующий функционал: Верхняя переменная RadioAtom код представляет собой "атом", который в последствии экспортируется в "молекулу"

export const RadioAtom = ([{label, defaultChecked}]) =>   <FormControlLabel  control={<Radio />} label="#" defaultChecked="#" />

Как сделать чтобы было следующее: При экспорте атома в молекулу я мог задавать в массиве объектов параметры радиокнопок, и они появлялись с нужными мне значениями на странице

<RadioGroup 
    RadioAtom={[
        {name: что-то, label: что-то, defaultChecked: true/false},
        {name: что-то2, label: что-то2, defaultChecked: true/false2}
    ]}          
/>

Answer 1

Допустим это ваш массив с данными

const dataRender = [
        {name: что-то, label: что-то, defaultChecked: true},
        {name: что-то2, label: что-то2, defaultChecked: false}
    ]

Компонент RadioAtom будет принимать параметр data и с помощью метода .map() возвращать массив JSX элементов(FormControlLabel):

  export const RadioAtom = ({data}) => {
    data.map(item => 
      <FormControlLabel 
        control={<Radio/>} 
        label={item.label} 
        defaultChecked={item.defaultChecked}
      />
  }

Теперь в RadioGroup добавим компонент RadioAtom где указывается передаваемый параметр data и его значение:

<RadioGroup>
    <RadioAtom data={dataRender} />
</RadioGroup>

БЛОГ НА HUSL

Как сделать шаблонный компонент в React/MUI, добавляя в ручную нужные данные

Ответы (1 шт):