Programmatically generated JSX string

Question

I have a text file that I'd like to convert to a JSX string using Regex and display on the browser as if it's a JSX markup manually entered in the render return () block.

Let's say I create a string

generatedString = '<span class="tag" style={divStyle}>Test string</span>'

and want to have it displayed in the browser by

render() {
  <div> {generatedString} <div>
}

The browser shows

"<span_class="tag"_style={divStyle}>Test string</span>"

as a text string, instead of "Test string" with the style applied to it.

You probably shouldn't need to go from JSX string to the DOM like that. If you elaborate on your use case, someone here might have a cleaner suggestion. — Josh David Miller
– Josh David Miller, Commented Jan 17, 2016 at 21:30

Icepickle · Accepted Answer · 2016-01-17 19:21:56Z

2

You can use the dangerouslySetInnerHTML property on the div tag to render HTML as you like. This would still however be just displayed as HTML and not as a jsx tag, like this:

render() {
    return <div dangerouslySetInnerHTML={generatedString} />;
}

If you anyhow generate the JSX string yourself, then why not choose create a class that renders those properties, like in the following fiddle

var GeneratedComponent = React.createClass({
    propTypes: {
        content: React.PropTypes.object
    },
    render() {
        var content = this.props.content;
        if (!content || !content.tag) {
            return null;
        }
        return React.createElement(content.tag, content);
    }
});

answered Jan 17, 2016 at 19:21

Icepickle

12.8k3 gold badges38 silver badges51 bronze badges

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

Comments

iamsmruti · Accepted Answer · 2024-03-19 17:09:25Z

0

you can do it like this as well.

Create a component that returns JSX and also takes the variables through props.

const renderSpan = ({divStyle}) => {
  return (
     <span class="tag" style={divStyle}>Test string</span>
  )
}

Then use it

<div>
  {renderSpan(divStyle)}
</div>

You can pass the divStyles as an object.

answered Mar 19, 2024 at 17:09

iamsmruti

2592 silver badges9 bronze badges

Collectives™ on Stack Overflow

Programmatically generated JSX string

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related