How can I pass a DOM element to an HTML attribute? ReactJs/ Javascript

Question

I have to pass react element to html attribute:

let element = (
<div>
   <div> test</div>
    <div> <span> test333</span></div>
</div>
)
<div data-react = {element}></div>

However I get "object Object" inside the data-react attribute, is there a way I could use a method to pass dom element and use that inside my render function?

This is the expected o/p I'm trying to get to render it as a react element:

UPDATE::::::::: So here is what I have tried:

I want to show a tooltip that has HTML content, however data-tip accepts only "string" and not html. Hence now im using react component to show the tooltip content.

Now I want to pass the tooltip content to my react component that I'll use to show the tooltip, but for that I need to find a way to pass the content defined:

let element = (
    <div>
       <div> test</div>
        <div> <span> test333</span></div>
    </div>
    )
    <div data-react = {element}></div>

hence I used: <div data-tip = {ReactDOMServer.renderToString(elements)}></div>

with this in my tooltip component <Tooltip> const tipvalue = e.target.getAttribute("data-tip") ;

I get data-tip value as a string, now I want to pass this to my react component to render the html.

<Tooltip>
<ReactTooltip content = {tipvalue}/>
</Tooltip>


export default class ReactToolTip extends PureComponent {

  render() {
    const doc = new DOMParser().parseFromString(this.props.content, "application/xml");
    const htmlSections = doc;
      return (
        {htmlSections}
      );
  }
}

however this gives me:

not sure how to render it in the component after this? any ideass???

Please post a minimal reproducible example. There is no code like console.log or anything which would print "object Object". Also, what are you trying to do with data-react? — palaѕн
– palaѕн, Commented Mar 6, 2020 at 17:18
@palaѕн: this is just an attribute I'm trying to use to get the dom element inside my toltip, so that I can use this content to render using a React component. I'll update my question — user1234
– user1234, Commented Mar 6, 2020 at 17:23
Ok, maybe you can try to look into Refs and the DOM - Refs provide a way to access DOM nodes or React elements created in the render method. — palaѕн
– palaѕн, Commented Mar 6, 2020 at 17:26
The question is why do you need to do this? What are you trying to do? We could try to help you if you could provide some context. — jperl
– jperl, Commented Mar 6, 2020 at 17:54

Yevhenii Shashkov · Accepted Answer · 2020-03-06 17:44:29Z

1

I hope this example will be helpful. Probably if you are getting example variable from other context, it is better to use var or const variable declaration

import React, { Component } from 'react';

var element = (
<div>
   <div> test</div>
    <div> <span> test333</span></div>
</div>
);

class App extends Component {
  render() {
    return (
      <div className="App">
        {element}
      </div>
    );
  }
}

export default App;

this code on repl.it playground

answered Mar 6, 2020 at 17:44

Yevhenii Shashkov

4741 gold badge8 silver badges19 bronze badges

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

Comments

João Marcello · Accepted Answer · 2020-03-06 17:37:33Z

1

If that didn't work, you should try making a component out of it and then you can pass the props of the father component to it.

function Element() {
   return (
      <div>
          <div>test</div>
          <div><span>test333</span></div>
      </div>
   )
}
<Element />

edited Mar 6, 2020 at 17:37

answered Mar 6, 2020 at 17:25

João Marcello

386 bronze badges

7 Comments

user1234 Over a year ago

it still comes out as object Object

Kevin Gilbert Over a year ago

what do you want the output to be ? the markup inside ?

user1234 Over a year ago

@JoãoMarcello: updated my question with the screenshot of the o/p.thanks

Kevin Gilbert Over a year ago

so you want to serialize the component into a string ? (keep in mind you can only render a string here). I guess JSON.stringify(component) would work in some way but... It's a very strange behiavor and your probably not using the right strategy here.

João Marcello Over a year ago

I think you should be making a component, like I showed you, and if you want to make something dynamic inside it, you pass as a prop to the <Element />. Passing this element as a variable won't make sense...

|

Kevin Gilbert · Accepted Answer · 2020-03-06 17:18:36Z

0

You unfortunately can't do this. Even if React look like HTML, they're not working the same. Your data-react attribute can only contains string.

answered Mar 6, 2020 at 17:18

Kevin Gilbert

1,0221 gold badge12 silver badges24 bronze badges

Comments

Mechanic · Accepted Answer · 2020-03-06 17:23:31Z

0

Since react only keep string or number attributes in the DOM, you can only convert them to string to keep it there:

<div data-react={String(element)}>

I don't know how are you going to use that elsewhere, but honestly why you would ever need that ? :) I suggest think about Refs

answered Mar 6, 2020 at 17:23

Mechanic

5,4484 gold badges19 silver badges44 bronze badges

Collectives™ on Stack Overflow

How can I pass a DOM element to an HTML attribute? ReactJs/ Javascript

4 Answers 4

Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related