I have a function, which generate random text and insert react components (from arguments) in random places and return it. It accept object with components, example:

```
function func(components) {...}

func({first: <div>Hello</div>});

```

In the func i do this:

```
function func(components) {
    let randomStr = "123aweasdKhjhasj{first}asdjhasjkdh";
    randomStr = randomStr.replace("{first}", components.first);
    return randomStr;
}

```

But my result is 123aweasdKhjhasj[object Object]asdjhasjkdh, i know, i pass in jsx, but i have no idea, how i can decide this.

I know one, i must return jsx object, but i do not know, how to generate it.

From my example, i want get it:

```
123aweasdKhjhasj<div>Hello</div>asdjhasjkdh

```

And div, it's not string, it realy html component