CODEWITHSUNDEEP
reactjs
kitsoRik
kitsoRik

Reputation: 219

Return text and react component as string

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

Upvotes: 0

Views: 3987

Answers (3)

Prakash Reddy Potlapadu
Prakash Reddy Potlapadu

Reputation: 1001

you have to write the object {first: <div>Hello</div>} as {first: '<div>Hello</div>'} because javascript cannot recognize html tags as a datatype

Upvotes: 0

asmaa
asmaa

Reputation: 725

if you want to get this one

123aweasdKhjhasj<div>Hello</div>asdjhasjkdh

you can do the following

function func(components) {
    return `123aweasdKhjhasj${components.first}asdjhasjkdh`
}

Upvotes: 1

Irfan434
Irfan434

Reputation: 1681

Return a JSX element instead of a string.

function func(components) {
  return (
    <>
      <p>123aweasdKhjhasj</p>
      {components.first}
      <p>asdjhasjkdh</p>
    </>
  )
}

Upvotes: 2

Related Questions