Salut! J'essaie de rendre des éléments de réglages dynamiques. P>
const Items = settingsItemData.map((item) => (
<SettingsCard
image={item.settingsCategoryItems.image}
link={item.settingsCategoryItems.link}
label={item.settingsCategoryItems.label}
/>
))
3 Réponses :
et vos fonctions de flèche On dirait un peu bizarre, il devrait être et non ceci pourrait / devrait devenir quelque chose comme Je ne peux pas le tester, mais j'espère que vous obtenez l'idée générale. item.item.settingsCategoryItems est un tableau, pas un objet, donc au minimum, vous devez itérer les paramètres SettingsCategoryitems .
Essayez ceci. Vous devez également effectuer une deuxième carte via ParamètresCategoryItems pour le faire fonctionner
const Items = settingsItemData.map((item) => (
item.settingsCategoryItems.map(el => (
<SettingsCard
image={el.image}
link={el.link}
label={el.label}
/>
Vous êtes dans la bonne voie, mais vous devez également cartographier le tableau CODE> ParamètresCateGoryitems CODE> afin d'accéder aux valeurs et de peindre l'interface utilisateur que vous souhaitez afficher (comme vous pouvez le voir dans ce qui suit CODE SNIPPET):
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
class Component1 extends Component {
state = {};
render() {
const settingsItemData = [
{
settingsCategory: 'Exam',
settingsCategoryItems: [
{
image: 'LabExamRequestIcon',
link: '/settings/exam-request',
label: 'Exam Items',
col: '4',
// offset: 4
},
{
image: 'LabExamRequestIcon',
link: '/settings/lab-exam-request',
label: 'Exam Request',
col: '4',
}
]
},
{
settingsCategory: 'Others',
settingsCategoryItems: [
{
image: 'LabExamRequestIcon',
link: '../settings/panel-exam',
label: 'Panel Exam',
col: '4'
},
{
image: 'UserMaintenanceIcon',
link: '/settings/user-maintenance',
label: 'User Maintenance',
col: '4'
}
]
}
];
const rowItems = settingsItemData.map((item) => {
return <div className={`row__${item.settingsCategory}`}>
<h1>{item.settingsCategory}</h1>
{item.settingsCategoryItems.map(item2 => {
return <button>{item2.label}</button>;
})}
</div>;
});
return (
<div className="container">
<h1>Settings</h1>
{rowItems}
</div>
);
}
}