CODEWITHSUNDEEP
javascriptreactjs
user1234
user1234

Reputation: 3159

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

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: enter image description here

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: enter image description here

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

Upvotes: 0

Views: 946

Answers (4)

Yevhenii Shashkov
Yevhenii Shashkov

Reputation: 474

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

Upvotes: 1

Jo&#227;o Marcello
Jo&#227;o Marcello

Reputation: 38

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 />

Upvotes: 1

Mechanic
Mechanic

Reputation: 5380

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

Upvotes: 0

Kevin Gilbert
Kevin Gilbert

Reputation: 1022

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.

Upvotes: 0

Related Questions