React component with html text

Question

I want to render react components with html, and my react component must listen states, but I can`t do it..

{component} = <span>ComponentText</span>

I have something like this and this Array can be in different orders and different combinations, for example:

let result = ['<div><p>123', {component}, '</p></div>', {component}];

With "dangerouslySetInnerHTML", I have:

123[Object][Object]

Without "dangerouslySetInnerHTML":

<div><p>123ComponentText</p></div>ComponentText

I`m looking for result like this:

123ComponentTextComponentText

And my states and events with this component must work well, Is it possible?

T.J. Crowder · Accepted Answer · 2017-11-01 16:22:30Z

3

In React, you don't deal in HTML snippets like your result array, you deal in objects.

But you can use JSX to do something similar to what you want, just not with isolated bits of text in an array:

let result = [<div><p>123<Component /></p></div>, <Component />];

Live Example:

class Component extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      value: Math.floor(Math.random() * 1000)
    };
  }
  render() {
    return <span>I'm a component, this.state.value = {this.state.value}</span>;
  }
}

let result = [<div><p>123<Component /></p></div>, <Component />];

ReactDOM.render(
  <div>{result}</div>,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

To illustrate that you're still dealing with objects despite using JSX, here's what that JSX transpiles to:

var result = [
    React.createElement(
        "div",
        null,
        React.createElement(
            "p",
            null,
            "123",
            React.createElement(Component, null)
        )
    ),
    React.createElement(Component, null)
];

answered Nov 1, 2017 at 16:22

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

Aleksey Dubinskiy Over a year ago

Thank you for quick answer! I receive string from server and after I add parts of my message together with components in one array.. Maybe in my case I need to write custom parser from string to react elements

T.J. Crowder Over a year ago

@AlekseyDubinskiy: Yes, I'm afraid you do.

Collectives™ on Stack Overflow

React component with html text

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related