How to render String of functional component in React?

Question

I have use case to render component from database. In data base they are stored as string format like below:

let Sample = `({firstName})=><h1>My name is {firstName}</h1>`;

When I try to render this in react, it shows as string. How to render string type of functional component.

class App extends Component {

  this.state = {
  "sathish" : "firstName",
  }

  render (){
      // how do it use string of functional component like below
      return <Sample firstName={this.state.firstName} />
   }
}

yes i aware but they stored as string.. i want this string to convert functional component... how do i do it? — sathish kumar, Mar 15 '19 at 13:12

Vadim Hulevich · Answer 1 · 2019-03-15T13:13:25.957

-1

you can use eval for this: let Sample = eval(({firstName})=><h1>My name is {firstName}</h1>);

or more complicate solution it's https://babeljs.io/docs/en/babel-parser#example

edited Mar 15 '19 at 13:13

answered Mar 15 '19 at 13:11

Vadim Hulevich

1,803
8
17

That's not what he's looking for – Brian Le Mar 15 '19 at 13:11
OP said they stored these component strings in the database. – Tholle Mar 15 '19 at 13:11

How to render String of functional component in React?

1 Answers1