Convert String in React Components

Question

I have a string which is actually a nested react components name with its props. Want to render that string inside another react component . For example

var String = "<parentComponent title='Parent'><childComponent age='23'></childComponent></parentComponent>"

React Code: -

class MainComponnet extends Component{
 render(){
  let stringComponents = "<parentComponent title='Parent'><childComponent age='23'></childComponent></parentComponent>";
  return(
     {stringComponents}
  )
 }
}

Parent Component JSX : -

class ParentComponent extends Component{
 render(){
  return(
     <div> {this.props.title}</div>
  )
 }
}

Child Component JSX : -

class ChildComponent extends Component{
 render(){
  return(
     <div> {this.props.age}</div>
  )
 }
}

Please help..

Actually service would be returning the component string and accordingly I have to render that components. — Kracki, Jun 16 '17 at 13:54
I think doing this is somewhat not possible.Probably you need a react-jsx-parser here to convert you string to a normal component type thing and then render it — VivekN, Jun 16 '17 at 14:04
Thanks Vivek. Am hunting for such parser online, hard luck . Is there any way that you can help me — Kracki, Jun 16 '17 at 14:11
Not sure, but can you try this https://github.com/TroyAlford/react-jsx-parser — VivekN, Jun 16 '17 at 14:13

score 1 · Answer 1 · answered Jun 19 '17 at 13:35

1

Thanks alot for every one for helping me. Library 'react-jsx-parser' solved my problem .

answered Jun 19 '17 at 13:35

Kracki

63
1
12

Shubham Khatri · Accepted Answer · 2017-06-16T14:55:39.820

0

That string has JSX content, you can directly render JSX contents, also the component names must begin with Uppercase charater.

See this answer: React - Adding component after AJAX to view

class MainComponnet extends Component{
 render(){
  let stringComponents = <ParentComponent title='Parent'><ChildComponent age='23'></ChildComponent></ParentComponent>;
  return(
     </div>{stringComponents}</div>
  )
 }
}

In case you cannot use a direct JSX element, you can transform your string to JSX using babel. However its not a good idea. you should rather modify your logic.

You can do it as follows

import babel from 'babel-core';
var Component = eval(babel.transform('<ParentComponent title='Parent'><ChildComponent age='23'></ChildComponent></ParentComponent>).code);

edited Jun 16 '17 at 14:55

answered Jun 16 '17 at 14:24

Shubham Khatri

270,417
55
406
400

Thanks for Reply @Shubham but if you will notice my string is surronded by double quotes and yours not. Its data type is string hence while render its not processing react component. – Kracki Jun 16 '17 at 14:37
Exactly my point, you dont need to surround your string within double quotes, directly assign the JSX content to the variable – Shubham Khatri Jun 16 '17 at 14:38
I don't have any other options, this is what am getting in json from backend. If I can remove that quotes on UI or any other way to load component from String would be helpful. – Kracki Jun 16 '17 at 14:47
Added that part in the answer – Shubham Khatri Jun 16 '17 at 14:55

Convert String in React Components

2 Answers2