0

I have below array of objects as sample input. I have this object available on page load of component.

I need to iterate on it and then fetch its Label Name,its input type and text associated to it.

Say suppose for first objet, I need to show label and its input type is dropdown and its text in one row, then go to second object show its lable text, its input type is textbox and then text on second row and so on for all other objects.

It should happen on run time when page is loading. I am not sure how to do it.

I just need to render it on page load. So I know that I need to write that code in componentDidMount() method but how to render is not sure.

While I am looking for sample code but approach to resolve it will also help me to solve it on my own. Thanks in advance. 

[
    {

        "LABEL_NAME": "Purpose",
        "LABEL_TYPE": "STANDARD_LABEL",
        "WIDGET_TYPE": "NARROW_DROPDOWN",
        "TEXT": "Abc"
    },
    {
        "LABEL_NAME": "Sub-purpose",
        "LABEL_TYPE": "STANDARD_LABEL",
        "WIDGET_TYPE": "Textbox",
        "HELP_TEXT": "pqr"
    },   
    {
        "LABEL_NAME": "Date",
        "LABEL_TYPE": "STANDARD_LABEL",
        "WIDGET_TYPE": "DATE_FIELD",
        "HELP_TEXT": null
    }
]
Dylan
  • 1,121
  • 1
  • 13
  • 28
Nilesh
  • 518
  • 1
  • 9
  • 26
  • Take a look at this https://codesandbox.io/s/axios-playground-j6cph. A different approach would be to create an API to that returns your list of labels instead of returning on page load. You can call this API from componentDidMount method and add it to your state.once the data is received. Then populate the input fileds using this data. – Abhilash Chelankara Mar 31 '20 at 11:26
  • I had a look there. But it is displaying a data in list format, I need to display like Lable Name --> Its input type say Textbox/Dropdown --> Text and then on second row continues for second object, – Nilesh Mar 31 '20 at 11:33
  • 1
    Check this now. I have update it https://codesandbox.io/s/axios-playground-j6cph. I think that should give you an idea how it can be done. – Abhilash Chelankara Mar 31 '20 at 11:49
  • @AbhilashChelankara I am using your code. Geting positive progres. Thanks a billion for this. – Nilesh Mar 31 '20 at 12:00
  • glad that it helped you. Would be great if you could upvote my comments. – Abhilash Chelankara Mar 31 '20 at 12:27
  • I have blow code.
  • {LABEL_NAME == "Undefined" ? "" : LABEL_NAME } : { WIDGET_TYPE = "NARROW_DROPDOWN" ? : ""
    • How can I check the switch case in widget type case. I want to make controls based upon its type. Like dropdown or textbox or any other. – Nilesh Mar 31 '20 at 12:29
  • 1
    https://stackoverflow.com/questions/46592833/how-to-use-switch-statement-inside-a-react-component This shows a lot of ways to do it – Abhilash Chelankara Mar 31 '20 at 12:36
  • @AbhilashChelankara Its done. Thank you very very very much. – Nilesh Mar 31 '20 at 13:24