How to parse a string to a React component?

Question

Say I have a string const s = "I love $FB", and I wanna get:

<p>I love <a href="/symbol/FB">$FB</a></p> by <RenderContent content={s}>

I can use reg to extract the symbol, but how can I turn the string into a React component, without using dangerouslySetInnerHTML?

I suppose a good option here is to use React.createElement in your RenderContent component, see all about using react without JSX here: facebook.github.io/react/docs/react-without-jsx.html — Finbarr O'B
– Finbarr O'B, Commented Jul 25, 2017 at 14:43

Finbarr O'B · Accepted Answer · 2017-07-25 14:57:13Z

1

An alternative render function for a component to use regex capturing groups, no validation is done on the .exec result however:

render() {
  const subs = /(^.*)(\$(.*))/.exec(this.props.content);
  return (
    <p>
      { subs[1] }
      <a href={`/symbol/${subs[3]}`}>{subs[2]}</a>
    </p>
  );
}

answered Jul 25, 2017 at 14:57

Finbarr O'B

1,4741 gold badge15 silver badges18 bronze badges

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

Comments

Vlado Pandžić · Accepted Answer · 2017-07-25 14:51:57Z

1

In your render method you can do this:

<p>{this.props.s.split('$')[0]} 

 <a href="/symbol/{this.props.s.split('$')[1]}">${this.props.s.split('$')[1]}
 </a>
</p>

answered Jul 25, 2017 at 14:51

Vlado Pandžić

5,0758 gold badges50 silver badges82 bronze badges

Comments

Vipul Panth · Accepted Answer · 2017-07-25 15:44:30Z

0

Use like this

ReactDOM.render(<RenderContent><p>I love <a href="/symbol/FB">$FB</a></p></RenderContent>, element);

Now in your RenderContent Component use the following code:

render(){
   return <div>{this.props.children}</div> //this will render your inner react component

}

edited Jul 25, 2017 at 15:44

answered Jul 25, 2017 at 15:33

Vipul Panth

5,9114 gold badges18 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to parse a string to a React component?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related