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
– Kracki, Commented Jun 16, 2017 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
– VivekN, Commented Jun 16, 2017 at 14:04
Thanks Vivek. Am hunting for such parser online, hard luck . Is there any way that you can help me — Kracki
– Kracki, Commented Jun 16, 2017 at 14:11
Not sure, but can you try this github.com/TroyAlford/react-jsx-parser — VivekN
– VivekN, Commented Jun 16, 2017 at 14:13

Kracki · Accepted Answer · 2017-06-19 13:35:11Z

1

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

answered Jun 19, 2017 at 13:35

Kracki

632 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Khatri · Accepted Answer · 2017-06-16 14:55:39Z

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, 2017 at 14:55

answered Jun 16, 2017 at 14:24

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

4 Comments

Kracki Over a year ago

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.

Shubham Khatri Over a year ago

Exactly my point, you dont need to surround your string within double quotes, directly assign the JSX content to the variable

Kracki Over a year ago

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.

Shubham Khatri Over a year ago

Added that part in the answer

Collectives™ on Stack Overflow

Convert String in React Components

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related