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?
I want to reuse my jsx element in multiple places.
What you have works just fine:
const value= <div>some text<Link href="http://example.com">text</Link></div>;
function Example() {
return (
<div>
{value}
{value}
{value}
</div>
);
)
Live Example:
const { createRoot } = ReactDOM;
function Example() {
return (
<div>
{value}
{value}
{value}
</div>
);
)
createRoot(document.getElementById("root")).render(<Example />);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>It's entirely valid to create and reuse React elements that way. The JSX just creates the information React needs to render that content. The actual rendering happens when you use it, as above where I use {value} in Example.
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.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>
);
()value? There is too much missing informationhrefis invalid, unless you really have a document at./abc.com. You need a scheme in front of it.