0

I work with json files of the following format:

[{"title": "SomeTitle",
"description": "someDescription"},
{"title": SomeTitle1,
 "description": someDescription1}
...
]

I need to traverse the JSON file and dynamically generate React components with the same names as titles and the given descriptions. So the program needs to generate something like this:

<SomeTitle description={someDescription} />
<SomeTitle1 description={someDescription1} />

I need to run the script only once to generate all necessary components. Could anyone tell me how to approach this? Should I use something like React.createComponent() function? Thanks!

katya
  • 99
  • 3
  • 9
  • SomeTitle and SomeTitle1 are allready created? – Roman Jul 24 '17 at 21:31
  • No, they aren't created. I would like to create the prototype for all the components which is simply the components that take "description" as props. Then I need to create new components ,, ... It can be any number of components depending on the size of JSON file – katya Jul 24 '17 at 21:36
  • Create a component `SomeTitle` pass `title` and `description` as props from a parent component while looping through the json. i.e `json.map((element) => ` – Vipul Singh Jul 24 '17 at 21:39
  • The reason why I wanted to create components with different names is the navigation. I would like to put these newly generated components on the same page and to be able to navigate to them using the NavBar. In order to do that, the components should have different ids and I was thinking of using react-router for that. Do you think that with the props approach I'll still be able to navigate to each component separately? Let me know if this question makes sense. Thanks! – katya Jul 24 '17 at 21:44
  • Yes I think with the single component, and based on props you can have the functionality you desire.For more you can see the link https://stackoverflow.com/questions/35764510/how-to-implement-dynamic-routing-in-routes-js-for-generated-menu-items-in-sideba – Vipul Singh Jul 24 '17 at 21:50
  • Here's an example of someone doing something similar: https://wail.es/react-dynamic-components-building-rendering/ – AnilRedshift Jul 24 '17 at 22:16
  • Thanks so much! I'm going to try to do it with props – katya Jul 25 '17 at 12:48
  • So I managed to dynamically generate the components and the elements in the Router by doing the following: {data.map(section => )} However, I don't know how to render my components in the router now since my components do not have a specific name – katya Jul 25 '17 at 15:00

0 Answers0