How to insert React element into string

Question

I would like to add React component into the string as JSX like this

const name = <a href="#"> World </a>
const a = 'Hello, {name}'
return <div>{a}</div>

how can I get the following output

<div> Hello, <a href="#">World</a></div>

@Rustam D9RS's answer below is great, but unless you're doing anything particularly complex with your assignment to JSX, something like this is usually simpler: const name = 'World'; const href='#'; return <div><a href={href}>{name}</a></div> — Lionel Rowe
– Lionel Rowe, Commented Jun 18, 2020 at 8:33

Rustam D9RS · Accepted Answer · 2020-06-18 08:24:35Z

2

You don't need a string; instead, you also need to use JSX syntax (this won't work with a string):

const name = <a href="/">World</a>;
const a = <>Hello, {name}</>;
return <div>{a}</div>;

answered Jun 18, 2020 at 8:24

Rustam D9RS

3,5011 gold badge13 silver badges19 bronze badges

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

Comments

ROOT · Accepted Answer · 2020-06-18 08:35:14Z

1

you can just use another function component to get the other HTML part, and then add it to the main app return function inside {}, here is a working snippet:

function name() { 
  return (<a href="#"> World </a>);
}

const App = () => {
  const a = `Hello, `
  return (
    <div>{a} {name()}</div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

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

answered Jun 18, 2020 at 8:35

ROOT

11.7k5 gold badges35 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to insert React element into string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related