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?

What error are you getting? Where you are using `value` ? There is too much missing information — Vencovsky, Nov 08 '19 at 17:21
Side note: That `href` is invalid, unless you really have a document at `./abc.com`. You need a scheme in front of it. — T.J. Crowder, Nov 08 '19 at 17:22

T.J. Crowder · Answer 1 · 2019-11-08T18:00:16.777

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>

Sure you can reuse the variable itself: https://jsfiddle.net/qvhu38fc/ — Mosè Raguzzini, Nov 08 '19 at 17:34
@MosèRaguzzini - **Wow**. Thanks. That is very surprising. Are you sure it's properly supported? — T.J. Crowder, Nov 08 '19 at 17:36
@MosèRaguzzini - Thank you again. Wow, that's a massive difference from how the DOM works. (I know, I know, don't generalize DOM concepts to React...) I've fixed it, btw. — T.J. Crowder, Nov 08 '19 at 17:39
Np mate, curly braces are evaluating every time the variable passed in. That do the trick, I suppose. — Mosè Raguzzini, Nov 08 '19 at 17:41
@MosèRaguzzini - I get it now. `createElement` just stores the information about how to create the element. It actually gets created when being used. TIL something fundamental about React, thanks again. — T.J. Crowder, Nov 08 '19 at 17:52

Hevar · Answer 2 · 2019-11-08T17:26:10.543

5

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>
  );

edited Nov 08 '19 at 17:26

answered Nov 08 '19 at 17:22

Hevar

1,474
1
13
24

how to store jsx element to javascript variable

2 Answers2