how to store jsx element to javascript variable

Question

I want to reuse my jsx element in multiple places.

const value= <div>some text<Link href="abc.com">text</Link></div>

and I want to call value in multiple places.

I tried adding ' ' for the div but not getting element properly. It is returing as string. Can someone explain me the correct syntax to render jsx element to JavaScript variable?

Answer 1

I want to reuse my jsx element in multiple places.

You can't. It can only be used in one place. It would appear that you can, I stand corrected by Mosè Raguzzini, this works just fine::

const value= <div>some text<Link href="http://example.com">text</Link></div>;

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

Live Example:

const value= <div>some text<a href="http://example.com">text</a></div>;

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

<div id="root"></div>

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

Another approach is to have a function that creates identical copies of it:

const getValue = () => <div>some text<Link href="abc.com">text</Link></div>;

Then when you want one, use getValue() to get it.

Or even give that a capital letter so it's a functional component:

const Value = () => <div>some text<Link href="abc.com">text</Link></div>;

Live Example (of both):

const getValue = () => <div>some text<a href="http://example.com">text</a></div>;

const Value = () => <div>some text<a href="http://example.com">text</a></div>;

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

<div id="root"></div>

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

---

how to store jsx element to javascript variable

You can't reuse a React element the way you've shown, but there's nothing wrong with:

const value= <div>some text<Link href="abc.com">text</Link></div>

(other than relying on ASI at the end, because there's no ;). That works just fine. But it doesn't make it reusable.

Here's an example doing that:

const value= <div>some text<a href="http://example.com">text</a></div>;

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

<div id="root"></div>

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

Answer 2

You could create a stateless component to reuse said component:

  import React from "react"

  export const MyComponent = () => (
    <div>
      some text <Link href="abc.com">text</Link>
    </div>
  );