so I’m creating this menu as a fun project in React and I’ve finished the code to display/style the components, so now I’m setting it up to be dynamic and generate the menu based on a passed set of data.
My React project routes like this: “App /” -> “Tab /” -> Various components based on data.
The plan is to have a menu (“App /”) contain potentially multiple “Tab /”s of various inputs, such as date, text, number, range, etc
Lets say I use this dataset as an example:
elements: [
{
type: "number",
text: "Some Text Label",
fields: [
{
text: "Some Text",
min: 0,
max: 50,
value: 25
},
{
text: "Some Text",
min: 25,
max: 75,
value: 50
},
]
},
{
type: "text",
text: "Some Text Label",
fields: [
{
text: "Some Text",
value: "Some Text Placeholder"
}
]
},
{
type: "number",
text: "Some Text Label",
fields: [
{
text: "Some Text",
min: 0,
max: 100,
value: 50
},
]
},
]
Within the “Tab /” component, I’d want to look through the elements to find the type of one element, then use the component that is ready for that element (for example, type: “number”, I would use “Number /” and then pass the fields as a prop to that component.
Something like this: “Number fields={insertdatahere}/>
I’m a total beginner when it comes to react, but I’ve tried a few ways myself and I feel like im just missing something because nothing is working. I was considering just having all of the Components manually placed inside the tab component and having them set as “Display: None” unless an element is present for that type.
thanks for any advice