0

is there a way, to be able to target a react component based on the name provided, the name is inside the json file, for example: left_side_bar, top_nav, footer, etc

And then render multiple child components using the .map function inside React Component with the corresponding name.

{
    "name": "top_nav",
    "text": "Top Navigation",
    "url": "",
    "icon": "",
    "items": [
        {
            "name": "overview",
            "text": "Overview",
            "url": "http://tpa.gatewaypro.com/overview",
            "icon": "tpa_overview_icon.jpg",
            "items": []
        },
        {
            "name": "plan-health",
            "text": "Plan Health",
            "url": "http://tpa.gatewaypro.com/plan-health/",
            "icon": "tpa_plan_health_icon.jpg",
            "items": []
        },
        {
            "name": "employees",
            "text": "Employees",
            "url": "http://tpa.gatewaypro.com/employees",
            "icon": "tpa_employees_icon.jpg",
            "items": []
        }
    ]
}

in the above example: "name": "top_nav", could have been left_side_bar, which would then mean instead of targeting the top_nav component inside react, the left_side_bar component... I guess the better question is ask is, is it even possible to "target" a component in react. You know like you would have in jQuery/javascript $(#idName).append(stuff);

or do a find and place?

adnan tariq
  • 197
  • 2
  • 13
  • take a look https://stackoverflow.com/questions/30172433/create-an-instance-of-a-react-class-from-a-string – Ian Guimarães Feb 14 '20 at 17:48
  • @IanGuimarães thanks while this is example is talking about creating a a react component with the specified class name, I don't think it would work for what I'm trying to do which is target a component (with say a class name) already existing with dom – adnan tariq Feb 14 '20 at 18:29
  • 1
    It's possible, but it completely depends on what tools and libraries you use. Just to give an example of what I'm thinking: let's say you use Redux as a store, you render your components, each component subscribes to their own data source in that store, eventually you fetch your json with data and update these data sources in the store, as soon as you update them - component will update as well. So you kinda _targeted_ your component as you wanted. So you can take this is approach as a possible solution :) – Max Feb 14 '20 at 19:29
  • @Max Thank you Max, i believe your idea would work ^-^ – adnan tariq Feb 14 '20 at 21:24

0 Answers0