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

Answer 3

I assume that you want to send dynamic content to the Links, so made href as ref:)

---

function MyFunction(){




const Value = ({ href }) => <div>some text<Link href={ href }>text</Link></div>;


 return (
 <div>
    <p> div with value and more </p>
    <Value href={"a.com"} />
    <Value href={"b.com"} />
    <Value href={"c.com"} />
  </div>
    )
}